纯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]
文章评论