-webkit-filter应用

我们在代码化页面的时候已经越来越多的用到了-webkit-filter滤镜效果，这些滤镜效果最初是用于SVG的，W3C引入到CSS中，然后制定了CSS Filter Effects 1.0，效果很赞。

现在我们能在CSS规范中支持的效果有：

• grayscale 灰度
• sepia 褐色
• saturate 饱和度
• hue-rotate 色相旋转
• invert 反色
• opacity 透明度
• brightness 亮度
• contrast 对比度
• blur 模糊
• drop-shadow 阴影

有一些CSS3也能实现，不过透明度阴影等特殊效果就需要它的帮助了。

webkit-filter的用法也很简单，标准的CSS写法：

-webkit-filter: blur(2px);

对于图片的效果控制也很赞：

原图

模糊

50%灰度

100%灰度

50%褐色

100%褐色

50%亮度

100%亮度

色相

反色

饱和度

对比度

webkit-filter目前只有部分浏览器支持，但是其应用已经必不可少，如果您还不了解，那您就已经OUT了，敢快了解上手，让你的网页与众不同。