CSS filter 属性可实现模糊、亮度、对比度等视觉效果。1. blur() 设置高斯模糊，数值越大越模糊；2. brightness() 调整明暗，百分比低于100%变暗，高于100%变亮；3. contrast() 改变对比度，0%为灰色，高于100%增强对比；4. 多个函数可用空格分隔组合使用，如模糊加调亮。示例：.frosted-glass { filter: blur(8px) brightness(90%) contrast(110%); } 注意过度使用可能影响可读性，需根据场景调整参数。
使用 CSS filter 属性可以轻松实现图像或元素的模糊、亮度、对比度等视觉效果调整。它适用于图片、背景、文字甚至视频，只需在目标元素上添加相应的 filter 函数即可。
1. 模糊（Blur）
通过 blur() 函数为元素添加高斯模糊效果，参数是模糊半径，单位为 px。
说明：- 数值越大，模糊程度越高
- 值为 0 表示无模糊
示例：
img {
filter: blur(5px);
}
2. 亮度调整（Brightness）
使用 brightness() 函数控制元素的明暗程度。
立即学习“前端免费学习笔记（深入）”；
说明：- brightness(100%) 表示原始亮度
- 小于 100% 变暗，如 brightness(50%)
- 大于 100% 变亮，如 brightness(150%)
- 值为 0% 时元素全黑，超过 100% 会显得更亮甚至发白
示例：
.darken {
filter: brightness(30%);
}
3. 对比度调整（Contrast）
用 contrast() 函数增强或减弱颜色对比。
说明：- contrast(100%) 保持原样
- 低于 100% 降低对比，如 contrast(50%)
- 高于 100% 提升对比，如 contrast(200%)
- 设为 0% 时所有像素变为灰色
示例：
.high-contrast {
filter: contrast(180%);
}
4. 组合多个效果
你可以将多个 filter 函数写在一起，用空格分隔。
常见组合：- 模糊 + 降低亮度：用于模态框背景
- 提高亮度 + 增强对比：突出显示图片
示例：
.frosted-glass {
filter: blur(8px) brightness(90%) contrast(110%);
}
基本上就这些。CSS filter 使用简单，性能也不错，适合做轻量级视觉处理。注意过度模糊或高亮度可能影响可读性，建议结合实际场景微调参数。
