CSS 滤镜

CSS滤镜（Filter）属性提供了强大的视觉效果处理能力，允许对元素（如图片、背景等）应用图形特效。以下是常用滤镜函数及示例：

1. 模糊效果 blur()

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

<div class="blur" style="background: url('image.jpg'); width: 200px; height: 200px;"></div>

效果：元素模糊（5px半径）。

2. 亮度调整 brightness()

.bright {
  filter: brightness(150%); /* >100% 更亮 */
}
.dark {
  filter: brightness(50%);  /* <100% 更暗 */
}

效果：增加或降低元素亮度。

3. 对比度调整 contrast()

.high-contrast {
  filter: contrast(200%); /* 增强对比度 */
}
.low-contrast {
  filter: contrast(50%);  /* 降低对比度 */
}

4. 阴影效果 drop-shadow()

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

参数：x偏移 y偏移 模糊半径 颜色（类似 box-shadow）。

5. 灰度转换 grayscale()

.grayscale {
  filter: grayscale(100%); /* 0%彩色 → 100%黑白 */
}

6. 色调旋转 hue-rotate()

.hue-rotate {
  filter: hue-rotate(90deg); /* 颜色相位旋转 */
}

效果：元素整体色相变化（0°~360°）。

7. 反相颜色 invert()

.invert {
  filter: invert(100%); /* 完全颜色反转 */
}

8. 透明度 opacity()

.translucent {
  filter: opacity(30%); /* 类似 opacity 属性 */
}

注意：与 opacity 属性不同，某些浏览器中滤镜性能更优。

9. 饱和度 saturate()

.high-saturation {
  filter: saturate(300%); /* 增强色彩鲜艳度 */
}
.desaturate {
  filter: saturate(20%);  /* 降低饱和度 */
}

10. 深褐色调 sepia()

.sepia {
  filter: sepia(100%); /* 复古棕褐色效果 */
}

组合多个滤镜

.multiple-filters {
  filter: 
    contrast(120%) 
    brightness(110%) 
    drop-shadow(2px 2px 4px black);
}

规则：多个滤镜空格分隔，按声明顺序依次应用。

示例：复古照片效果

.vintage {
  filter: 
    sepia(80%) 
    contrast(110%) 
    brightness(90%)
    hue-rotate(-10deg);
}

<img src="photo.jpg" class="vintage" alt="复古风格">

浏览器支持

• 现代浏览器（Chrome, Firefox, Edge, Safari）均支持
• IE 不支持，可加 -ms-filter 前缀兼容旧版（部分功能）