html - 所有浏览器的css线性渐变效果

Question

我是 stackoverflow 的新手。这是我的第一个问题。我在 css liner 渐变方面遇到问题。我有这个 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));
}

和这个 html:

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

目前它在 firefox 中完美运行。在 google chrome,safari 和 ie 中不可用(ie8 也需要支持)。

fiddle link

Answer 1

你可以尝试这样的事情:

.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

转到“自己尝试”。

我想这对你有帮助。

附言您也可以查看浏览器的兼容版本。 IE9及以下不支持渐变!