关于css3 中filter的各种特效

做项目时遇到了一个有趣的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);/

}