所有浏览器的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线性渐变效果

回答

相关问题