php渐变背景颜色,纯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]