CSS3 filter滤镜详细介绍及示例

前言

filter是css3的一个属性，大家应该都很少用到，很多人只是知道有这个属性。Webkit率先支持了这几个功能，不过现在大部分浏览器也都做了兼容性，下面大家就一起来学习吧。

参数语法

现在规范中支持的效果有：

参数	描述	取值
grayscale	灰度	值为0-1之间的小数
sepia	褐色	值为0-1之间的小数
saturate	饱和度	值为num
hue-rotate	色相旋转	值为angle
invert	反色	值为0-1之间的小数
opacity	透明度	值为0-1之间的小数
brightness	亮度	值为0-1之间的小数
contrast	对比度	值为num
blur	模糊	值为length
drop-shadow	阴影

语法

-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);

示例

无效果filter:none;

模糊filter:blur(10px);

灰度filter:grayscale(0.5);

亮度filter:brightness(0.5);

对比度filter:contrast(2.6);

饱和度filter:saturate(7.9);

色相旋转filter:hue-rotate(260deg);

反色filter:invert(0.9);

阴影filter:drop-shadow(10px 10px 10px #000);

组合

最后大家看看几种组合效果

是不是感觉美美哒了，美女换了身衣服，皮肤也变得红润了，头发唇彩等都变了。前端也可以用代码P出好看的图片，是不是很厉害？

上面的效果代码：

filter:saturate(1.9) contrast(.6) hue-rotate(320deg);

公告

喜欢小编的点击关注，了解更多知识！