所有瀏覽器的css線性漸變效果

我是新的stackoverflow。這是我的第一個問題。我在css班輪漸變中遇到問題。我有這樣的CSS：所有瀏覽器的css線性漸變效果

.body-middle{ 
    float: left; 
    margin-left: 1%; 
    padding-left: 1%; 
    padding-right: 1%; 
    background: #fff; 
    background: linear-gradient(180deg, transparent, #353535, transparent); 

    background-position: 50%; 
    background-repeat: repeat-y; 
    background-size: 1px auto; 
    height: 300px; 
    width: 2%; 

    background: -webkit-gradient(linear,180deg, transparent, #353535, transparent)); 
}

和這個網站：

<div class="body-middle"></div>

目前在Firefox完美地工作。它不適用於谷歌瀏覽器，safari和ie（也需要在ie8中支持）。

fiddle link

來源

2014-08-31 Shahriar Parvez

什麼不工作？ – 2014-08-31 14:43:51

雖然你的具體問題已經回答了一個提示 - 谷歌的CSS梯度發生器，那麼你會發現一些鏈接，您可以輕鬆地爲所有瀏覽器生成CSS梯度。 – 2014-08-31 14:52:15

它看起來不像鉻一樣火狐 – 2014-08-31 14:54:28

你可以嘗試這樣的事情：

.box_gradient { 
    background-color: #444444; 
    background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */ 
    background-image:   linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera */ 
}

編輯：不要忘了給它的高度和寬度的DIV。你也可以在這裏看到一個例子：

http://www.w3schools.com/css/css3_gradients.asp

轉到「試試你的自我」。

我想這會幫助你。

P.S.你也可以看到兼容版本的瀏覽器。 IE9及以下版本不支持漸變！

來源

2014-08-31 14:44:54 anchor

謝謝，但它仍然就像一條線沒有梯度鉻 – 2014-08-31 15:02:06

所有瀏覽器的css線性漸變效果

回答

相關問題