-webkit-filter是神马?

这两天有看到国外网站纷纷介绍-webkit-filter，开始很迷惑，丫是想要学IE吗？今天看了下，和IE的滤镜没一毛关系啊，而且，效果很赞！

这些滤镜效果最初是用于SVG的，W3C引入到CSS中，然后制定了CSS Filter Effects 1.0，现在webkit率先支持了它。

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

• grayscale 灰度

• sepia 褐色

• saturate 饱和度

• hue-rotate 色相旋转

• invert 反色

• opacity 透明度

• brightness 亮度

• contrast 对比度

• blur 模糊

• drop-shadow 阴影
  
  

嗯，有些和CSS3重复了，不过，具体要怎么用还要看具体情况，至少我们可以用不同的方法实现同样的效果——比如透明度。

用法是标准的CSS写法：

-webkit-filter: blur(2px);

然后，Eric Bidelman写了一个demo，可以很方便的查看各种效果。但是考虑到某网站因为不明原因在国内无法访问，我将该demo页面简单的翻译了下，放到这边给大家预览，请猛击查看。

请注意，改滤镜目前只有最新的webkit nightly版本和Chrome 18.0.976以上版本才支持，所以你需要下载一个最新的版本来体验～～我用的是webkit nightly。

现在，让我们看一下一些简单的效果吧：

原图

模糊

50%灰度

100%灰度

50%褐色

100%褐色

50%亮度

100%亮度

色相

反色

饱和度

对比度

• ∧ 上篇文章：数据库性能优化之冗余字段的作用
• ∨ 下篇文章：新春免费送大礼！老用户免费直升最新版！