纯css背景颜色渐变,完美兼容各主流浏览器
纯css背景颜色渐变css写法: [codesyntax lang="php"]
.boxbg{ width:100%; height:auto; filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AC5F45,endColorStr=#612014); background: -ms-linear-gradient(top, #AC5F45, #612014); background: -moz-linear-gradient(top, #AC5F45,#612014); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AC5F45),to(#612014)); background: -webkit-linear-gradient(top, #AC5F45,#612014); background: -o-linear-gradient(top, #AC5F45,#612014); float:left; }
[/codesyntax]
完美兼容各主流浏览器
注意:这里只是垂直渐变,如果是水平渐变请把top改成left
示例如下:
[codesyntax lang="php" lines="normal"]
<style type="text/css"><!-- .boxbg{ width:100%; height:auto; filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AC5F45,endColorStr=#612014); background: -ms-linear-gradient(top, #AC5F45, #612014); background: -moz-linear-gradient(top, #AC5F45,#612014); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AC5F45),to(#612014)); background: -webkit-linear-gradient(top, #AC5F45,#612014); background: -o-linear-gradient(top, #AC5F45,#612014); float:left; } .box{width:100px; height:300px; float:left; margin-left:20px; display:inline;} .cls{clear:both;} --></style> <div class="box boxbg"></div>
[/codesyntax]