CSS filter滤镜属性使用

CSS filter属性用于应用模糊或颜色调整效果，类似于PS的滤镜功能。

以下是一些常用的filter属性值及其使用示例：

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() - 调整透明度。

img {
  filter: opacity(50%);
}

8. saturate() - 调整饱和度。

img {
  filter: saturate(300%);
}

9. sepia() - 将图像转换为深褐色。

img {
  filter: sepia(100%);
}

10. drop-shadow() - 应用阴影效果。

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

多个filter效果可以组合使用，以空格分隔：

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

以上代码示例展示了如何在图片元素上应用各种滤镜效果。在实际应用中，可以根据需要选择合适的滤镜并调整参数值。