CSS滤镜

CSS滤镜是一种应用于网页元素的视觉效果，它可以改变元素的颜色、透明度、模糊度、亮度等属性，从而改变元素的外观和风格。常见的滤镜包括模糊、灰度、透明度、伸缩、旋转等等，今天我们就要向大家介绍CSS滤镜的完整攻略，并提供代码示例。

CSS滤镜的基本用法如下：

filter: <filter-function> [<value>];

其中，filter-function指要应用的滤镜函数，value是可选的参数，用于传递特定的值给滤镜函数。下面是一些常用的滤镜函数及其值：

• blur：模糊滤镜，取值为模糊程度（pixels）
• brightness：亮度滤镜，取值为亮度值（百分比或数字）
• contrast：对比度滤镜，取值为对比度值（百分比或数字）
• grayscale：灰度滤镜，取值为灰度值（百分比或数字）
• hue-rotate：色相旋转滤镜，取值为旋转角度（deg）
• invert：反转滤镜，取值为反转程度（百分比或数字）
• opacity：透明度滤镜，取值为透明度值（百分比或数字）
• saturate：饱和度滤镜，取值为饱和度值（百分比或数字）
• sepia：深褐色滤镜，取值为深褐色值（百分比或数字）
• drop-shadow：阴影滤镜，取值为阴影样式（颜色、水平偏移、垂直偏移、模糊半径）

接下来我们列举一些常见的滤镜效果，及其代码示例：

1. 模糊

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

2. 灰度

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

3. 透明度

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

4. 色相旋转

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

5. 饱和度

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

6. 深褐色

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

7. 对比度

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

8. 反转

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

9. 阴影

.shadow {
  filter: drop-shadow(2px 2px 2px black);
}

总结

本文向大家介绍了CSS滤镜的基本用法，包括常用的滤镜函数及其值，并提供了一些代码示例。通过使用这些滤镜效果，我们可以轻松地改变网页元素的外观和风格，给用户带来更好的视觉体验。