CSS中的滤镜（Filter）属性详解

描述
CSS滤镜（Filter）属性允许您对元素（通常是图片）应用图形效果，如模糊、亮度调整、对比度调整等。它基于SVG滤镜原语，提供了一种直接通过CSS实现视觉效果的方法，无需借助图像处理软件。

核心概念
filter属性接受一个或多个滤镜函数，每个函数对应一种视觉效果。多个滤镜可以串联使用，按顺序应用。滤镜会影响元素的内容（包括子元素）和背景。

常见滤镜函数及用法

1. 模糊（blur）

   • 作用：对元素内容施加高斯模糊效果。
   • 语法：blur(半径)，半径值越大越模糊。
   • 示例：

     .element {
       filter: blur(5px); /* 模糊半径为5像素 */
     }
     

   • 注意：半径值为0时无效果，不支持百分比。

2. 亮度（brightness）

   • 作用：调整元素的亮度。
   • 语法：brightness(倍数)。值为1时保持原样，小于1变暗，大于1变亮。
   • 示例：

     .element {
       filter: brightness(0.5); /* 亮度减半 */
     }
     

3. 对比度（contrast）

   • 作用：调整元素的对比度。
   • 语法：contrast(倍数)。值为1时保持原样，小于1降低对比度，大于1增加对比度。
   • 示例：

     .element {
       filter: contrast(200%); /* 对比度加倍 */
     }
     

4. 灰度（grayscale）

   • 作用：将元素转换为灰度图。
   • 语法：grayscale(比例)。值为0保持彩色，1完全灰度。
   • 示例：

     .element {
       filter: grayscale(1); /* 完全灰度 */
     }
     

5. 其他常用滤镜

   • sepia(比例)：转换为深褐色调（0-1）。
   • hue-rotate(角度)：色相旋转（如90deg）。
   • saturate(倍数)：调整饱和度（1为原样）。
   • opacity(比例)：调整透明度（类似opacity属性，但滤镜可组合使用）。
   • drop-shadow(x偏移 y偏移 模糊半径 颜色)：添加阴影效果（与box-shadow不同，它贴合元素形状）。

多滤镜组合
多个滤镜空格分隔，按顺序应用：

.element {
  filter: brightness(1.2) contrast(0.8) blur(2px);
}
/* 先调整亮度，再调整对比度，最后模糊 */

动态效果与过渡
滤镜可与transition属性结合实现平滑动画：

.button {
  filter: grayscale(0);
  transition: filter 0.3s;
}
.button:hover {
  filter: grayscale(1); /* 悬停时变为灰度 */
}

性能注意事项

• 滤镜对性能有影响，尤其在大量元素或复杂滤镜（如blur）时。
• 避免对大型元素或动画频繁应用滤镜，可考虑使用will-change: filter优化。

浏览器兼容性
主流浏览器均支持filter，但旧版本可能需要前缀（如-webkit-filter）。使用工具如Autoprefixer自动处理。

通过灵活组合滤镜函数，无需修改图像资源即可实现丰富的视觉效果，增强页面交互性。