蓝戒的博客


纯css背景颜色渐变,完美兼容各主流浏览器

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]
完美兼容各主流浏览器
<span style="color: #ff0000;">注意:这里只是垂直渐变,如果是水平渐变请把top改成left
<span style="color: #000000;">
示例如下:</span></span>
[codesyntax lang="php" lines="normal"]

&lt;style type="text/css"&gt;&lt;!--
.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;}
--&gt;&lt;/style&gt;
&lt;div class="box boxbg"&gt;&lt;/div&gt;

[/codesyntax]

本文固定链接: http://www.webzsky.com/?p=181 | 蓝戒的博客

cywcd
该日志由 cywcd 于2013年11月11日发表在 css 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 纯css背景颜色渐变,完美兼容各主流浏览器 | 蓝戒的博客
关键字:

纯css背景颜色渐变,完美兼容各主流浏览器:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×