CSS 滤镜

CSS filter 属性允许你为元素（通常是图片）应用图形化的效果，类似于 Photoshop 中的滤镜。你可以用它来调整元素的渲染效果，例如模糊、改变颜色饱和度、亮度和对比度等。

filter 属性

filter 属性接受一个或多个滤镜函数 (filter functions) 作为其值。

blur()

为图像应用高斯模糊效果。值越大，模糊程度越高。0 表示不模糊。

filter: blur(5px);

brightness()

调整图像的亮度。0% 会使图像完全变黑，100% 是原始亮度，超过 100% 会使其更亮。

filter: brightness(200%);

contrast()

调整图像的对比度。0% 会使图像完全变灰，100% 是原始对比度，超过 100% 会增加对比度。

filter: contrast(150%);

grayscale()

将图像转换为灰度图。100% 表示完全灰度，0% 表示原始图像。

filter: grayscale(100%);

invert()

反转图像的颜色。100% 表示完全反转，0% 表示原始图像。

filter: invert(100%);

opacity()

调整图像的透明度。0% 表示完全透明，100% 表示完全不透明。这与 opacity 属性的效果相同。

filter: opacity(50%);

saturate()

调整图像的色彩饱和度。0% 表示完全不饱和（灰度），100% 是原始饱和度，超过 100% 会增加饱和度。

filter: saturate(250%);

sepia()

为图像应用褐色效果（老照片效果）。100% 表示完全褐色，0% 表示原始图像。

filter: sepia(100%);

hue-rotate()

对图像的色相进行旋转。值是一个角度，0deg 到 360deg 对应色轮上的一圈。

filter: hue-rotate(90deg);

drop-shadow()

drop-shadow() 函数与 box-shadow 属性类似，但有关键区别：drop-shadow 会为元素内容的非透明部分创建阴影。这对于不规则形状的 PNG 图片或 SVG 图形非常有用，因为它会沿着内容的实际轮廓创建阴影，而不是元素的矩形边界框。

filter: drop-shadow(8px 8px 10px gray);

多重滤镜

你可以将多个滤镜函数链接在一起，用空格隔开，以创建更复杂的效果。

img:hover {
  filter: blur(2px) grayscale(80%) brightness(120%);
}

CSS 滤镜为前端开发者提供了一个强大的工具，可以在不依赖图形编辑软件的情况下，动态地、交互地改变元素的视觉表现。