[分享]css中常见的滤镜有哪些

CSS中常见的滤镜有很多种，这些滤镜能够对网页中的元素完成一些视觉上的改变，让网页看起来更炫酷、更美观。下面我们就来了解一下几种常见的CSS滤镜。一、模糊滤镜 filter: blur(5px); 该...

CSS中常见的滤镜有很多种，这些滤镜能够对网页中的元素完成一些视觉上的改变，让网页看起来更炫酷、更美观。下面我们就来了解一下几种常见的CSS滤镜。

一、模糊滤镜

 filter: blur(5px); 

该滤镜可以让元素模糊处理，括号里的数值越大，则元素就会变得越模糊。

二、灰度滤镜

 filter: grayscale(100%); 

该滤镜可以让元素变灰，数字越大则元素越灰。

三、透明度滤镜

 filter: opacity(50%); 

该滤镜可以让元素半透明，数字越大则元素越不透明。

四、反转颜色滤镜

 filter: invert(100%); 

该滤镜可以让元素颜色反转，数字越大则元素颜色越接近黑色。

五、饱和度滤镜

 filter: saturate(200%); 

该滤镜可以让元素饱和度增强，数字越大则元素的颜色越鲜艳。

六、亮度滤镜

 filter: brightness(200%); 

该滤镜可以让元素的亮度增强，数字越大则元素越亮。

七、对比度滤镜

 filter: contrast(200%); 

该滤镜可以让元素的对比度增强，数字越大则元素的明暗差异越明显。

八、阴影滤镜

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

该滤镜可以让元素添加阴影效果，第一个参数为水平偏移量，第二个参数为垂直偏移量，第三个参数为阴影模糊半径，第四个参数为阴影颜色。

以上就是CSS中常见的滤镜，可以根据实际需要应用到元素上，让元素呈现出不一样的效果。