关于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);/
}