CSS filter 属性可实现图像或元素的模糊与亮度调整，1. 使用 blur() 函数设置高斯模糊半径，如 img { filter: blur(5px); } 用于背景虚化；2. brightness() 函数调节亮度，参数为百分比或倍数，如 50% 变暗、150% 变亮；3. 多个滤镜可组合使用，如 filter: blur(4px) brightness(70%) 实现毛玻璃效果；4. 结合 transition 可添加过渡动画，使 hover 时的滤镜变化更平滑。合理运用能提升界面视觉体验。
使用 CSS 的 filter 属性可以轻松实现图像或元素的模糊和亮度调整效果。这个属性适用于图片、背景、文字、视频等几乎所有 HTML 元素，非常适合做视觉增强或交互反馈。
1. 实现高斯模糊（blur）
通过 blur() 函数对元素应用高斯模糊，参数为模糊半径，值越大越模糊。
示例：
img {
filter: blur(5px);
}
常用于模态弹窗背后的背景虚化，或鼠标悬停时的动态模糊效果。
2. 调整亮度（brightness）
brightness() 函数用于改变元素的亮度。参数为百分比或倍数：
- 100% 或 1 表示原始亮度
- 小于 100% 变暗（如 50%）
- 大于 100% 变亮（如 150% 或 1.5）
.dim {
filter: brightness(30%);
}
.brighten {
filter: brightness(1.8);
}
3. 组合模糊与亮度效果
你可以将多个 filter 函数组合使用，用空格分隔。
立即学习“前端免费学习笔记（深入）”；
.frosted-glass {
background: url("image.jpg");
filter: blur(4px) brightness(70%);
}
这种组合常用于毛玻璃（frosted glass）效果或提示性蒙层。
4. 添加过渡动画提升体验
结合 transition 可以让滤镜变化更自然。
示例：鼠标悬停时逐渐变亮并去模糊
.card img {
filter: blur(3px) brightness(60%);
transition: filter 0.4s ease;
}
.card img:hover {
filter: blur(0) brightness(100%);
}
这样用户交互时视觉反馈更柔和。
基本上就这些。CSS filter 简单高效，模糊和亮度是其中最实用的功能之一，合理使用能显著提升界面质感。
