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中完美运行。它不适用于谷歌浏览器，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

转到＆＃34;尝试自己＆＃34;。

我认为这会对你有所帮助。

P.S。您也可以看到兼容的浏览器版本。 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>

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

2 个答案: