CSS 实现毛玻璃模糊背景效果
毛玻璃（Frosted Glass）是现代 UI 设计中非常流行的视觉效果，常用于模态框、抽屉、侧边栏的背景，或是卡片悬浮在模糊背景上。导航栏、工具栏的半透明磨砂感以及音乐播放器、天气小组件也常采用这种风格。
主流实现方案对比
| 方案 | 核心属性 | 浏览器支持 | 性能 | 真实感 | 推荐指数 | 备注 |
|---|---|---|---|---|---|---|
| 1 | backdrop-filter: blur() | 极好（几乎全覆盖） | 中～高 | ★★★★★ | ★★★★★ | 首选 |
| 2 | filter: blur() + 伪元素 | 完美支持 | 中 | ★★★☆☆ | ★★☆☆☆ | 老项目兼容用 |
| 3 | SVG 滤镜 + feGaussianBlur | 完美支持 | 较低 | ★★★★☆ | ★☆☆☆☆ | 极致兼容用 |
| 4 | canvas / WebGL 实时模糊 | 完美支持 | 较低～中 | ★★★★★ | ★★☆☆☆ | 动态内容才考虑 |
结论很明确：99% 的现代项目直接使用 backdrop-filter: blur() 就够了，性能与效果的性价比最高。
首选方案：backdrop-filter
这是最经典的写法，核心在于三件套：半透明背景、模糊滤镜、饱和度提升。
/* 1. 最经典的毛玻璃卡片 */
.glass-card {
/* 核心三件套 */
background: rgba(255, 255, 255, 0.18); /* 半透明白色 */
backdrop-filter: blur(16px) saturate(180%); /* 模糊 + 饱和度提升 */
-webkit-backdrop-filter: blur(16px) saturate(180%); /* 兼容旧 Safari */
/* 边框（可选，但强烈推荐） */
: solid (, , , );
: ;
: (, , , );
: ;
}
(: dark) {
{
: (, , , );
: solid (, , , );
}
}
{
: (, , , );
: ();
-webkit-: ();
: ;
: solid (, , , );
}
