原图:
![](https://www.qianduange.cn/upload/article/a7e8022aef524bf0b22926cf185fe87e.png)
模糊(blur)
单位可为px或rem,值越大,越模糊
filter:blur(3px)
filter:blur(0.3rem)
![](https://www.qianduange.cn/upload/article/415aa6ebf43e482a86df211406e5155a.png)
亮度(brightness)
值可为数字或百分数,小于1时,亮度更暗;等于1时,无变化;大于1时,亮度更亮
filter:brightness(1.5)
filter:brightness(150%)
![](https://www.qianduange.cn/upload/article/0b2398ab27f7424ba4fd0c594647f8d0.png)
对比度(contrast)
值可为数字或百分数,小于1时,对比度更低;等于1时,无变化;大于1时,对比度更高
filter:contrast(0.7)
filter:contrast(70%)
![](https://www.qianduange.cn/upload/article/3e064f22ae49423f9b7ce58e58556e1d.png)
阴影(drop-shadow)
四个属性分别为:offset-x(阴影左右偏移的位置) offset-y(阴影上下偏移的位置) blur-radius(阴影模糊范围) color(阴影颜色)
filter:drop-shadow(-20px 10px 14px #c112d1)
![](https://www.qianduange.cn/upload/article/72d2f450f4e34dc78a921db1c400c8a9.png)
灰度(grayscale)
值可为数字或百分数,等于0时,无变化;等于1时,为全灰;小于0大于1时,灰度为中间值
filter:grayscale(0.8)
filter:grayscale(80%)
![](https://www.qianduange.cn/upload/article/99709bc597934865a0eb3608d74af66f.png)
色调旋转(hue-rotate)
单位为deg,值为0deg时,无变化,90deg=0.25turn,-90deg=270deg
filter:hue-rotate(90deg)
filter:hue-rotate(0.25turn)
![](https://www.qianduange.cn/upload/article/d31f9a6e72da4f4e94b3f6e8845415b3.png)
反色(invert)
值可为数字或百分数,等于0时,无变化;等于1时,完全反色
filter:invert(0.6)
filter:invert(60%)
![](https://www.qianduange.cn/upload/article/552602b70da84e82b27961074d87c270.png)
透明度(opacity)
值可为数字或百分数,等于0时,为透明;等于0.5时,半透明;等于1时,无变化
filter:opacity(0.3)
filter:opacity(30%)
![](https://www.qianduange.cn/upload/article/977e42f5363e4fbda1fa18c91f26887f.png)
饱和度(saturate)
值可为数字或百分数,等于0时,无饱和度;等于0.5时,半饱和度;等于1时,无变化;大于1时,为更大饱和度
filter:saturate(3)
filter:saturate(300%)
![](https://www.qianduange.cn/upload/article/624129ec491245ab8974647bfad4a019.png)
褐度(sepia)
值可为数字或百分数,等于0时,无变化;等于1时,为全褐;小于0大于1时,褐度为中间值
filter:sepia(0.65)
filter:sepia(65%)
![](https://www.qianduange.cn/upload/article/2ef231f841e24ee7bb113a2d9b6f1135.png)