css的filter全属性图文介绍

原图：

1. 模糊（blur）

单位可为px或rem，值越大，越模糊

filter:blur(3px)
filter:blur(0.3rem)

2. 亮度(brightness)

值可为数字或百分数，小于1时，亮度更暗；等于1时，无变化；大于1时，亮度更亮

filter:brightness(1.5)
filter:brightness(150%)

3. 对比度(contrast)

值可为数字或百分数，小于1时，对比度更低；等于1时，无变化；大于1时，对比度更高

filter:contrast(0.7)
filter:contrast(70%)

4. 阴影(drop-shadow)

四个属性分别为：offset-x（阴影左右偏移的位置） offset-y（阴影上下偏移的位置） blur-radius（阴影模糊范围） color（阴影颜色）

filter:drop-shadow(-20px 10px 14px #c112d1)

5. 灰度(grayscale)

值可为数字或百分数，等于0时，无变化；等于1时，为全灰；小于0大于1时，灰度为中间值

filter:grayscale(0.8)
filter:grayscale(80%)

6. 色调旋转(hue-rotate)

单位为deg，值为0deg时，无变化，90deg=0.25turn，-90deg=270deg

filter:hue-rotate(90deg)
filter:hue-rotate(0.25turn)

7. 反色(invert)

值可为数字或百分数，等于0时，无变化；等于1时，完全反色

filter:invert(0.6)
filter:invert(60%)

8. 透明度(opacity)

值可为数字或百分数，等于0时，为透明；等于0.5时，半透明；等于1时，无变化

filter:opacity(0.3)
filter:opacity(30%)

9. 饱和度(saturate)

值可为数字或百分数，等于0时，无饱和度；等于0.5时，半饱和度；等于1时，无变化；大于1时，为更大饱和度

filter:saturate(3)
filter:saturate(300%)

10. 褐度(sepia)

值可为数字或百分数，等于0时，无变化；等于1时，为全褐；小于0大于1时，褐度为中间值

filter:sepia(0.65)
filter:sepia(65%)