css线性渐变效果适用于所有浏览器

Question

我是stackoverflow的新手。这是我的第一个问题。我在css liner gradiant中遇到问题。我有这个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中完美地工作。它在谷歌chrome、safari和ie中不起作用（也需要在ie8中支持）。

小提琴链接

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及以下版本不支持渐变！

Answer 2

div {
width: 500px;
height: 200px;
margin: auto auto;
}
.gradient-1 {
      background: -moz-linear-gradient(140deg, rgba(57, 81, 117, 1) 0%, rgba(46, 66, 93, 1) 45%, rgba(32, 47, 66, 1) 100%);
    background: -webkit-linear-gradient(140deg, rgba(57, 81, 117, 1) 0%, rgba(46, 66, 93, 1) 45%, rgba(32, 47, 66, 1) 100%);
    background: linear-gradient(140deg, rgba(57, 81, 117, 1) 0%, rgba(46, 66, 93, 1) 45%, rgba(32, 47, 66, 1) 100%);
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#395175", endColorstr="#202f42", GradientType=1);
}
.gradient-2 {
      background: -moz-linear-gradient(45deg, red, green);
    background: -webkit-linear-gradient(45deg, red, green);
    background: linear-gradient(45deg,red, green);
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#00ff00", GradientType=1);
}

<div class="gradient-1"></div>
<div class="gradient-2"></div>

.gradient{
      background: -moz-linear-gradient(140deg, rgba(57, 81, 117, 1) 0%, rgba(46, 66, 93, 1) 45%, rgba(32, 47, 66, 1) 100%);
    background: -webkit-linear-gradient(140deg, rgba(57, 81, 117, 1) 0%, rgba(46, 66, 93, 1) 45%, rgba(32, 47, 66, 1) 100%);
    background: linear-gradient(140deg, rgba(57, 81, 117, 1) 0%, rgba(46, 66, 93, 1) 45%, rgba(32, 47, 66, 1) 100%);
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#395175", endColorstr="#202f42", GradientType=1);
}

<div class="gradient"></div>