CSS 滤镜 filter：属性说明与示例

filter 用于对元素（及其子内容、边框等）做图形处理，如模糊、明暗、色相偏移、灰度等。多个滤镜函数可空格连接，按从左到右顺序依次作用。

与 backdrop-filter 的区别：filter 处理元素自身；backdrop-filter 处理元素背后透过来的区域（常用于毛玻璃导航条），需背景半透明才看得见效果。

常用滤镜函数一览

另可使用 url() 引用 SVG 滤镜（进阶），本文不展开。

drop-shadow 与 box-shadow 的差异

• box-shadow：作用于元素的盒子矩形，与圆角配合时是「框外一圈阴影」。
• filter: drop-shadow(...)：更接近「按Alpha 通道勾轮廓」投影，对透明 PNG、不规则形状更自然。

.icon {
  filter: drop-shadow(2px 4px 6px rgb(0 0 0 / 0.35));
}

组合多个滤镜

.thumb {
  filter: grayscale(0.3) contrast(1.05) brightness(0.95);
}

.thumb:hover {
  filter: none; /* 悬停恢复 */
}

示例一：图片悬停轻微提亮

figure img {
  transition: filter 0.25s ease;
  filter: brightness(0.92);
}

figure:hover img {
  filter: brightness(1.05) saturate(1.08);
}

示例二：头像轻微模糊（占位或隐私）

.avatar--blur {
  filter: blur(6px);
}

示例三：暗色模式下略降对比（可与 prefers-color-scheme 配合）

@media (prefers-color-scheme: dark) {
  .photo {
    filter: contrast(0.95) brightness(0.9);
  }
}

backdrop-filter 简例（毛玻璃）

.glass-bar {
  background: rgb(255 255 255 / 0.55);
  backdrop-filter: blur(10px) saturate(1.2);
}

需保证背后有内容透出；纯不透明背景则看不出模糊。

性能与注意事项

• 模糊、大范围滤镜可能触发较多 GPU 合成，列表里对大量元素同时开重滤镜要谨慎。
• 动画 filter 时，部分浏览器开销高于 transform / opacity，可只在必要时过渡。
• filter 会创建包含块，可能影响内部 position: fixed 的表现，复杂布局时留意。

小结

• 用 filter 做统一视觉处理（灰度、复古、暗角感等）很方便。
• drop-shadow 适合不规则图形的投影需求。
• 背后模糊用 backdrop-filter；与 filter 分工不同。

兼容性：现代浏览器对常用滤镜支持较好；backdrop-filter 在旧版 Safari 曾需前缀，新项目可查 Can I useopen in new window 与 backdrop-filter 条目。