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