做项目时遇到了一个有趣的css特效。

目前各大浏览器对于css3的兼容已经非常好了，最新版本都可以支持css3，老版本的ie9以下的还是不支持，不过这不是重点，微软都准备放弃这些老古董了。

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

grayscale 灰度               值为0-1之间的小数

sepia 褐色　　　　　　   值为0-1之间的小数

saturate 饱和度　　　　 值为num

hue-rotate 色相旋转　　值为angle

invert 反色　　　　　　  值为0-1之间的小数

opacity 透明度　　　　　值为0-1之间的小数

brightness 亮度　　　　 值为0-1之间的小数

contrast 对比度　　　　 值为num

blur 模糊　　　　　　     值为length

drop-shadow 阴影 

用法是标准的CSS写法，如：

-webkit-filter:drop-shadow(10px 10px 10px #000);

-webkit-filter: blur(2px);

<img src="../img/filter_test.png" class="test-before">

<img src="../img/filter_test.png" class="test-after">

css代码如下：

.test-after {

-webkit-filter:grayscale(0.5);

filter:grayscale(0.5);

-moz-filter:grayscale(0.5);

/-webkit-filter:blur(20px);

filter:blur(20px);

-moz-filter:blur(20px);/

}