CSS3 filter滤镜详细介绍及示例

100人浏览 2024-12-22 09:17:57

前言

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

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

CSS3 filter滤镜详细介绍及示例

语法

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

无效果filter:none;

CSS3 filter滤镜详细介绍及示例

模糊filter:blur(10px);

CSS3 filter滤镜详细介绍及示例

灰度filter:grayscale(0.5);

CSS3 filter滤镜详细介绍及示例

亮度filter:brightness(0.5);

CSS3 filter滤镜详细介绍及示例

对比度filter:contrast(2.6);

CSS3 filter滤镜详细介绍及示例

饱和度filter:saturate(7.9);

CSS3 filter滤镜详细介绍及示例

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

CSS3 filter滤镜详细介绍及示例

反色filter:invert(0.9);

CSS3 filter滤镜详细介绍及示例

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

CSS3 filter滤镜详细介绍及示例

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

CSS3 filter滤镜详细介绍及示例

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

上面的效果代码：

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