-webkit-filter是神马?

这些滤镜效果最初是用于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);

 

原图:

     -webkit-filter:none;

 

灰度：

          -WebKit-filter：grayscale(0.5);灰度50%；

 

模糊：

          -webkit-filter：blur（3px）；这是模糊度3px

 

褐色：

          -WebKit-filter：sepia（0.5）；50%的褐色

 

亮度：

          -webkit-filter：brightness（5）；50%的亮度

 

 色相：

          -WebKit-filter：hue-rotate（180deg）；

 

反色：

          -WebKit-filter：invert（1）；

 

饱和度：

          -WebKit-filter：saturate（5）；

 

对比度：

          -WebKit-filter：contrast（1.4）；