CSS3实现兼容性的渐变背景效果

浏览数：39 / 时间：2015年06月09日

一、CSS3实现兼容性渐变背景效果，兼容FF、chrome、IE

渐变效果，现在主流的浏览器FF、Chrome、Opera、IE8+都可以通过带有私有前缀的CSS3属性来轻松滴实现渐变效果，IE7及以下也可以通过滤镜来实现渐变效果（滤镜来实现会消耗大量资源）

？为什么滤镜实现渐变效果会消耗大量资源 呵呵，菜鸟，什么都不懂，就只会百度了。见笑了。

原因是：由于IE内部在解析滤镜，也是通过大量的CPU计算，从而达到滤镜效果，最后再渲染。

二、各浏览器是如何实现渐变效果的

1、CSS3实现渐变背景的标准写法

background: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

[]在正则中表示一个字符类，这里，你可以理解为一个小单元。
|表示候选。也就是“或者”的意思，要么前面的，要么就后面的。
?为量词，表示0个或1个，言外之意就是，你可以不指定方向，直接渐变色走起。

　side-or-corner
side-or-corner中文意思就是“边或角”，可选值有：

[left | right] || [top | bottom]

color-stop

渐变关键颜色结点，语法为：

<color> [ <percentage> | <length> ]

Gecko内核的浏览器：    
background:-moz-linear-gradient(top, #CCC, #333);
Webkit内核的浏览器：
background:-webkit-gradient(linear, top, from(#CCC), to(#333));
IE8及以下通过滤镜实现：
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorStr=‘#CCC‘,endColorStr=‘#333‘);  /*IE滤镜实现渐变*/
其中，gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。
IE8+:
background: -ms-linear-gradient(#CCC 0%,#333 100%);