CSS滤镜（Filter）全攻略

CSS滤镜(Filter)属性应用于元素，以实现包括模糊，对比度，亮度，饱和度以及彩色滤镜等图形效果。

以下是一些使用CSS滤镜的示例：

1. 模糊效果(blur()):

img {
  filter: blur(5px);
}

2. 亮度调整(brightness()):

img {
  filter: brightness(50%);
}

3. 对比度调整(contrast()):

img {
  filter: contrast(200%);
}

4. 灰度效果(grayscale()):

img {
  filter: grayscale(100%);
}

5. 色调饱和度调整(hue-rotate()):

img {
  filter: hue-rotate(90deg);
}

6. 反色(invert()):

img {
  filter: invert(100%);
}

7. Opacity调整(opacity()):

img {
  filter: opacity(50%);
}

8. sepia效果(sepia()):

img {
  filter: sepia(100%);
}

9. 阴影效果(drop-shadow()):

img {
  filter: drop-shadow(16px 16px 20px red);
}

10. 多个滤镜效果结合使用:

img {
  filter: contrast(175%) brightness(125%);
}

以上代码中，filter属性可以接受多个效果，它们以空格分隔。每个函数的具体参数和用法可以查阅对应的CSS规范。

注意：滤镜效果可能会导致性能问题，尤其是在大型或复杂的网页上使用时，因此在移动设备上应当特别注意性能优化。