css的filter全属性

原图：

1. 模糊（blur）

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

1.  
   filter:blur(3px)
2.  
   filter:blur(0.3rem)

2. 亮度(brightness)

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

1.  
   filter:brightness(1.5)
2.  
   filter:brightness(150%)

3. 对比度(contrast)

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

1.  
   filter:contrast(0.7)
2.  
   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时，灰度为中间值

1.  
   filter:grayscale(0.8)
2.  
   filter:grayscale(80%)

6. 色调旋转(hue-rotate)

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

1.  
   filter:hue-rotate(90deg)
2.  
   filter:hue-rotate(0.25turn)

7. 反色(invert)

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

1.  
   filter:invert(0.6)
2.  
   filter:invert(60%)

8. 透明度(opacity)

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

1.  
   filter:opacity(0.3)
2.  
   filter:opacity(30%)

9. 饱和度(saturate)

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

1.  
   filter:saturate(3)
2.  
   filter:saturate(300%)

10. 褐度(sepia)

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

1.  
   filter:sepia(0.65)
2.  
   filter:sepia(65%)