filter

模糊：blur()

设置高斯模糊效果

"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；

亮度：brightness()

设置更暗或更亮

如果值是0%，会全黑。
值是100%，则无变化。
值超过100%，会比原来更亮。

灰度：grayscale()

转换为灰色图像

0%：无变化
100%：完全转为灰度图像

应用场景：网站因为需要默哀，所以一般会全站灰色，这个时候就可以使用这个属性，一键全灰色

引用外部文件：url()

url() 滤镜允许从链接的 SVG 元素或文件中应用 SVG 滤镜，让其作为滤镜效果的一部分

投影：drop-shadow()

设置阴影效果

与 box-shadow 的区别：
drop-shadow() 可以为复杂图形（如一个 PNG 图片中带透明区域的图形、一个不规则的 clip-path 裁剪的 div、或文字本身）创建精确的阴影，阴影会紧贴内容的轮廓。而 box-shadow 只能给盒模型创建阴影
drop-shadow() 在有 GPU 加速的情况下，性能会比 box-shadow 更好

透明度：opacity()

设置透明效果

和 opacity 属性区别不大，都能有 gpu 性能提升的效果。opacity 属性具有更好的语义，所以更推荐用这个

复古的棕褐色调：sepia()

设置深褐色效果，用于模拟摄影印刷技术

饱和度：saturate()

修改饱和度

值为0%则是完全不饱和
值为100%则无变化
值大于100%，则饱和度增高，色彩就会变重

色调旋转：hue-rotate()

应用色相旋转，和hsl() 中的色相（颜色轮的旋转）类似

反转：invert()

反转颜色

0%无变化
100%则完全反转

应用

1、一张图，改变色相，实现不同颜色效果

2、Gooey Effect（粘滞效果）

Gooey Effect = Blur (模糊) + Contrast (强对比度)

第一步：模糊 (blur(10px))
- 两个圆（::before 和 ::after），当应用 filter: blur(10px) 时，这两个圆的边缘变得模糊，变成了像光晕一样的团块
第二步：强对比度 (contrast(30))
- 30 是一个非常大的值（即 3000% 的对比度）
- 对比度滤镜的作用是：把“既不黑也不白”的中间色，强制推向极端
  - 颜色浅（淡）的地方 -> 变成纯白（或透明/背景色）
  - 颜色深（浓）的地方 -> 变成纯色（实体）