纯css背景颜色渐变,完美兼容各主流浏览器_蓝戒的博客


纯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]
完美兼容各主流浏览器
注意:这里只是垂直渐变,如果是水平渐变请把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]

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

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

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

发表评论


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