你认识-webkit-filter吗

前言：

 

其实这个topic的谈起，还是某某大侠基于webkit做一个特效的时候讨论到的，可能部分同学没有遇到过，简单说说吧。

 

正文：

 

       其实说起这个就先说说一个规范吧,Filter Effects 1.0

 

       规范的37点提了几种可能的值：

 

 

• drop-shadow      阴影

      参数：<shadow>

 

           它的值和设置 box-shadow是一样的

• blur                     模糊

      参数：<length>

          默认是0，不接受%这样的，合法的比如2px

• opacity                透明度

      参数：<number>  |  <percentage>

          默认是100%

• grayscale            灰度 

       参数：<number>  |  <percentage>

          默认是100% 

• invert                  反色

       参数：<number>  |  <percentage>

          默认是100% 

• brightness          亮度

      参数：<number>  |  <percentage>

   

          默认是100% 

    

• contrast              对比度

      参数：<number>  |  <percentage>

          默认是100% 

• sepia                  褐色

     参数：<number>  |  <percentage>

          默认是100% 

          用途：可以做旧照片

• saturate             饱和度

      参数：<number>  |  <percentage>

          默认是100% 

          >100%是可以被允许的。官方给的解释是：

          providing super-saturated results

          ------  超饱和的结果

• hue-rotate         色相旋转

     参数：<angle>

        默认是 0deg

• custom               自定义

      其实了解css3的，很多人会觉得其实里面很多与已有的一些重复了，比如box-shadow等

  很多人关心的问题 --------  哪些版本支持这个东东？

       在 前端观察里面看到的是 webkit nightly 和 Chrome 18.0.976+

  扩展阅读：

http://www.qianduan.net/what-is-webkit-filter.html

http://www.zhangxinxu.com/study/201208/css3-grayscale-filter.html

http://www.kuqin.com/webpagedesign/20111227/316769.html