CSS3 过滤效果教程

CSS3 过滤效果提供了一种简单的方式来增强网页元素的视觉效果。以下是一些常用的CSS3过滤效果及其应用：

1. 模糊效果 (Blur)

模糊效果可以使元素看起来更加柔和或模糊。以下是一个模糊效果的例子：

.blur {
  filter: blur(5px);
}

2. 颜色调整 (Color Adjustment)

颜色调整可以改变图像的亮度、对比度、饱和度等。以下是一个颜色调整的例子：

.color-adjust {
  filter: brightness(150%) contrast(120%) saturate(200%);
}

3. 颜色滤镜 (Color Filter)

颜色滤镜可以给图像添加一个特定的颜色滤镜效果。以下是一个颜色滤镜的例子：

.color-filter {
  filter: hue-rotate(180deg);
}

4. 亮度调整 (Brightness)

亮度调整可以增加或减少图像的亮度。以下是一个亮度调整的例子：

.brightness {
  filter: brightness(200%);
}

5. 对比度调整 (Contrast)

对比度调整可以增强图像的明暗对比。以下是一个对比度调整的例子：

.contrast {
  filter: contrast(200%);
}

6. 灰度效果 (Grayscale)

灰度效果可以将图像转换为灰度。以下是一个灰度效果的例子：

.grayscale {
  filter: grayscale(100%);
}

7. 反转效果 (Invert)

反转效果可以将图像颜色完全反转。以下是一个反转效果的例子：

.invert {
  filter: invert(100%);
}

8. 透明度调整 (Opacity)

透明度调整可以改变元素的透明度。以下是一个透明度调整的例子：

.opacity {
  filter: opacity(50%);
}

更多关于CSS3过滤效果的详细信息和示例，请参考本站CSS3教程。

[center] [center]