CSS3 Filter的十种特效

-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能。CSS3 filter和css filter完全是两样东东。更不是我们一直说的IE滤镜。

Filter主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上），不过我们在些只来讨论图片上的运用。

语法：

elm{

    filter: none | <filter-function > [ <filter-function> ]*

} 

例如：-webkit-filter: blur(2px);

其默认值是none，它不具备继承性。

浏览器的兼容性

现在只是webkit支持，而且只有webkit nightly版本和Chrome 18.0.976以上以上版本才支持。

现在规范中支持的效果有：

一、grayscale灰度：使用这个特效，会把图片变成灰色的，也就是说你的图片将只有两种颜色“黑色”和“白色”

-webkit-filter:grayscale(1);  //默认值：100％，如果grayscale()中没有任何参数值，将会以“100%”渲染（值为0-1之间的小数）

二、sepia褐色：使用这种效果，你的图片好像很古老的一样

 -webkit-filter:sepia(1);  //默认值：100％，如果sepia()中没有任参数值，将会以“100％”渲染（值为0-1之间的小数）

三、saturate饱和度：用来改变图片的饱和度

-webkit-filter:saturate(0.5);  //默认值：100％，将其值变大到300%：-webkit-filter:saturate(3); （值为num）

四、hue-rotate色相旋转：用来改变图片的色相

-webkit-filter:hue-rotate(90deg);  //默认值：0deg（值为angle）

五、invert反色：做出来的效果就像是我们照相机底面的效果一样

-webkit-filter:invert(1);  //默认值：100％ （值为0-1之间的小数）

六、opacity透明度：改变图片的透明度

-webkit-filter:opacity(.2);  //默认值：100％（值为0-1之间的小数）

七、brightness亮度：改变图片的亮度

-webkit-filter:brightness(.5);  //默认值：100％ （值为0-1之间的小数）

八、contrast对比度：改变图片的对比度

-webkit-filter:contrast(2);  //默认值：100％ （值为num）

九、blur模糊：改变图片的清晰度

-webkit-filter:blur(3px);  //默认值：0（值为length）

十、drop-shadow阴影：给图片加阴影效果，这个很像box-shadow一样的效果

-webkit-filter:drop-shadow(5px 5px 5px #ccc);