了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生，CSS3对各种滤镜效果有了支持，可以做出很多好玩儿效果，走马观花了解一下

语法

filter: function(param);

很很多CSS3属性一样，监狱支持情况需要使用浏览器前缀，CSS滤镜支持的方法有

1. grayscale 灰度
2. sepia 褐色
3. saturate 饱和度
4. hue-rotate 色相旋转
5. invert 反色
6. opacity 透明度
7. brightness 亮度
8. contrast 对比度
9. blur 模糊
10. drop-shadow 阴影

效果

拿图片做例子，看看效果

原图

-webkit-filter:none;

以下效果都不是截图，Chrome上看

模糊

-webkit-filter:blur(10px);

灰度

-webkit-filter:grayscale(0.5);

褐色

-webkit-filter:sepia(0.5);

亮度

-webkit-filter:brightness(3);

色相

-webkit-filter:hue-rotate(180deg);

反色

-webkit-filter:invert(1);

透明

-webkit-filter:opacity(0.5);

饱和度

-webkit-filter:saturate(5);

对比度

-webkit-filter:contrast(0.5);

阴影

-webkit-filter:drop-shadow(10px 10px 5px rgba(0,0,0,0.9));

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索饱和度
， 色相
， 效果
， 滤镜
， 支持
对比度
css3 图片滤镜、css3、css3 filter、css3滤镜效果、css 滤镜，以便于您获取更多的相关知识。