前言:
其实这个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+
扩展阅读: