CSS3滤镜

如何使用CSS3滤镜
在CSS代码中使用Filter属性便能达到滤镜的效果，写法如下：
fitler: filter(value);
正如你所期望的，这些滤镜效果原本应该在每个浏览器中都能使用，所以会自然地加上前缀，不过遗憾的是目前除了webkit内核的浏览器（Chrome、Safari）之外，其他浏览器暂时不能很好地支持滤镜，但这样写总是一个好习惯：
-webkit-filter: filter(value); -moz-filter: filter(value); -o-filter: filter(value); -ms-filter: filter(value);
除此之外，如果想要混合两种滤镜效果，那么可以这么写：
filter: blur(5px) brightness(0.5);           //同时使用了模糊和亮度调节两个滤镜

CSS3滤镜实例分析

我们采用一张未经处理的图片作为案例，同时在分析每一种滤镜的时候，我们会将已经使用PS处理好的滤镜图片（上图）与使用CSS3滤镜处理好的图片（下图）进行比较。你会惊奇地发现，在支持CSS3滤镜的浏览器下（目前只有webkit内核浏览器），你根本无法区分它们！

1.CSS3模糊滤镜

曾经想过使用CSS来动态调节图片或者文字的模糊度？有了CSS3滤镜之后你就能做到！模糊滤镜是采用像素进行计算的，所以你的书写方式可以参考以下代码：
filter: blur(5px); // 区分浏览器 -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px);

2.CSS3亮度滤镜

亮度滤镜的数值1是正常状态，0～1之间的数值降低亮度，>1的数值则会增加图片亮度，参考写法如下：
filter: brightness(1.3); // 区分浏览器 -webkit-filter: brightness(1.3); -moz-filter: brightness(1.3); -o-filter: brightness(1.3); -ms-filter: brightness(1.3);

3.CSS3饱和度滤镜

饱和度滤镜的数值为百分比，参考写法如下：
filter: saturate(50%); // 区分浏览器 -webkit-filter: saturate(50%); -moz-filter: saturate(50%); -o-filter: saturate(50%); -ms-filter: saturate(50%);

4.CSS3色相滤镜

这是一个非常棒的滤镜，因为它允许你通过旋转图片来进行色相的改变。该数值通过角度来进行调节，参考写法如下：
filter: hue-rotate(20deg); // 区分浏览器 -webkit-filter: hue-rotate(20deg); -moz-filter: hue-rotate(20deg); -o-filter: hue-rotate(20deg); -ms-filter: hue-rotate(20deg);

5.CSS3对比度滤镜

该属性也采用百分比来调节，如果百分比为0，则整张图片会变成完全的灰色，所以最好采用大于100%的数值来达到增加对比度的效果，参考写法：
filter: contrast(150%); // 区分浏览器 -webkit-filter: contrast(150%); -moz-filter: contrast(150%); -o-filter: contrast(150%); -ms-filter: contrast(150%);

6.CSS3反相滤镜

采用100%来达到反相的效果，其他数值有所偏差，参考写法如下：
filter: invert(100%); // 区分浏览器 -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%);

7.CSS3灰度滤镜

同样，使用100%的数值达到灰度的效果，其他数值会有所偏差，参考写法如下：
filter: grayscale(100%); // 区分浏览器 -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%);

8.CSS3复古滤镜

复古滤镜是一个非常具有艺术感觉的滤镜效果，使用起来也相当方便，同样采用100%的数值达到最好效果。参考写法如下：
filter: sepia(100%); // 区分浏览器 -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%);

以上就是所有好用简单的CSS3滤镜效果，不过最后还是需要提醒一下大家，这些滤镜目前只能在webkit内核的浏览器下有效，期待其他内核浏览器同样兼容的那一天，赶紧在你的网站建设项目中使用起来吧。