CSS3如何实现滤镜效果

在CSS3中，你可以使用filter属性来实现各种滤镜效果。filter属性允许你应用一组预定义的图像处理效果，如模糊、亮度调整、对比度调整等。以下是一些常用的滤镜效果及其使用方法：

1. 模糊（Blur）

img {
  filter: blur(5px);
}

2. 亮度（Brightness）

img {
  filter: brightness(150%);
}

3. 对比度（Contrast）

img {
  filter: contrast(150%);
}

4. 饱和度（Saturation）

img {
  filter: saturate(200%);
}

5. 灰度（Grayscale）

img {
  filter: grayscale(100%);
}

6. 反色（Invert）

img {
  filter: invert(100%);
}

7. 阴影（Drop Shadow）

div {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

8. 组合滤镜

你可以将多个滤镜效果组合在一起使用：

img {
  filter: blur(5px) brightness(150%) contrast(150%);
}

9. 不透明度（Opacity）

虽然opacity不是filter属性的一部分，但它可以与滤镜一起使用来调整元素的不透明度：

img {
  filter: blur(5px);
  opacity: 0.5;
}

兼容性

需要注意的是，filter属性在不同浏览器中的支持情况可能有所不同。为了确保兼容性，你可以使用厂商前缀：

img {
  -webkit-filter: blur(5px); /* Safari 和 Chrome */
  -moz-filter: blur(5px);    /* Firefox */
  -o-filter: blur(5px);      /* Opera */
  filter: blur(5px);         /* 标准语法 */
}

通过这些滤镜效果，你可以轻松地为你的网页添加各种视觉效果，提升用户体验。