css设置div背景色渐变代码：
.linear{
width:100%;
height:600px;
FILTER:
progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8);
/*IE 6 7 8*/
background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */
background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff));
/* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #fff, #0000ff); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #fff, #0000ff); /*Opera 11.10+*/
}
</style>
＜bod>
＜div class="linear"></div>
＜/body>不同浏览器css设置div背景渐变的方法：
IE浏览器下的渐变背景
IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码：
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
上面的滤镜代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=“色彩”代表渐变结尾的色彩。
Firefox浏览器下的渐变背景
Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性，-moz-linear-gradient属性
chrome/Safari浏览器下的渐变背景实现
对于webkit核心的浏览器，如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法，css-gradient，具体为-webkit-gradient，使用语Firefox浏览器是有一些差异的。
Opera11也支持了CSS3渐变。其用法与Firefox一致，需要使用-o-的前缀。另外，Chrome的渐变用法也开始向FireFox浏览器下的用法靠拢。
以上就是css怎样设置div背景色渐变？的详细内容，更多请关注0133技术站其它相关文章！
