CSS filter 属性可为元素添加模糊、灰度、亮度等视觉效果。blur() 函数通过像素值实现高斯模糊，常用于背景虚化；grayscale()、brightness()、contrast()、saturate() 和 hue-rotate() 可调整色彩表现，支持百分数或数字参数；多个滤镜可组合使用，以空格分隔并按顺序生效，建议先模糊后调色；常用场景包括图片悬停清除模糊、禁用按钮灰度显示、背景毛玻璃效果（配合 backdrop-filter）等；该属性兼容性良好，是提升页面视觉层次的轻量手段。
在网页设计中，CSS filter 属性可以为元素添加视觉特效，比如模糊、调整色彩等。它常用于图片、背景或整个容器的美化处理。下面介绍模糊和常见色彩滤镜的语法格式与实际应用方式。
filter 模糊效果（blur）
blur() 函数用于给图像或元素添加高斯模糊效果，值越大越模糊。
语法格式：filter: blur(半径);
半径单位通常使用 px，例如 blur(5px) 表示模糊半径为5像素。
立即学习“前端免费学习笔记（深入）”；
示例：
img {
filter: blur(3px);
}
这会让图片整体变得模糊，常用于背景图虚化，突出前景内容。
色彩调整滤镜（grayscale、brightness、contrast 等）
CSS 提供多种色彩类滤镜，可单独使用也可组合使用。
常用色彩滤镜及语法：
- grayscale(值)：转换为灰度图像。0% 无效果，100% 完全灰度。可使用百分数或 0-1 的数字（如 1 表示 100%）。
- brightness(值)：调整亮度。100% 正常亮度，小于则变暗，大于则变亮（如 brightness(1.5) 提亮50%）。
- contrast(值)：调整对比度。100% 正常，低于则降低对比，高于则增强。
- saturate(值)：饱和度。100% 正常，0% 完全去色，超过100% 更鲜艳。
- hue-rotate(角度)：色相旋转，单位 deg，如 hue-rotate(90deg) 改变颜色色调。
示例：
.dim {
filter: brightness(50%) contrast(120%);
}
这个类会让元素变暗并增强对比，适合用于悬停效果或夜间模式。
多个滤镜组合使用
多个 filter 函数可以用空格分隔，按顺序依次应用。
filter: blur(2px) grayscale(50%) brightness(80%);
注意顺序会影响最终效果，一般建议先模糊再调色。
实用场景：
- 图片悬停时取消模糊：
img:hover { filter: blur(0); } - 禁用状态按钮变灰：
.btn-disabled { filter: grayscale(100%) opacity(70%); } - 背景毛玻璃效果（常配合 backdrop-filter）：
.glass {
background: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
}
基本上就这些。filter 属性兼容性良好，现代浏览器基本都支持，是实现视觉增强的轻量方法。不复杂但容易忽略细节，比如单位和顺序。合理使用能让页面更有层次感。
