css filter
filter属性可以在该元素上添加一些滤镜效果，backdrop-filter属性可以在该元素的背景上添加一些滤镜效果。
filter-function
| 滤镜 | 描述 |
|---|---|
| none | 默认值，无效果 |
| blur(px) | 模糊效果 |
| brightness(%) | 调整亮度 |
| contrast(%) | 调整对比度 |
| drop-shadow(h-shadow v-shadow blur spread color) | 阴影效果（spread浏览器通常不支持） |
| grayscale(%) | 灰度效果 |
| hue-rotate(deg) | 色相旋转 |
| invert(%) | 反转效果 |
| opacity(%) | 透明度 |
| saturate(%) | 饱和度 |
| sepia(%) | 褐色效果 |
| url(filter-url) | 引用一个滤镜（SVG滤镜） |
| initial | 设置该属性为默认值 |
| inherit | 从父元素继承该属性 |
filter 演示
SVG滤镜
- feGaussianBlur (高斯模糊)
- feDropShadow (阴影)
- feMorphology (形态)
- feDisplacementMap (位移)
- feBlend (混合)
- feColorMatrix (颜色矩阵)
- feConvolveMatrix (卷积矩阵)
- feComponentTransfer (组件转换)
- feSpecularLighting (高光)
- feDiffuseLighting (漫反射)
- feFlood (填充)
- feTurbulence (湍流)
- feImage (图像)
- feTile (平铺)
- feOffset (偏移)
- feComposite (组合)
- feMerge (合并)