使用 CSS 实现毛玻璃（Frosted Glass）模糊背景效果
这是当前前端 UI 设计中非常流行的视觉效果之一，常用于模态框、侧边栏、卡片悬浮以及导航栏等场景。通过合理的样式组合，可以营造出通透且富有层次感的界面。
主流实现方案对比
| 方案 | 核心属性 | 浏览器支持 | 性能 | 真实感 | 推荐指数 |
|---|---|---|---|---|---|
| backdrop-filter | backdrop-filter: blur() | 极好（现代浏览器全覆盖） | 中～高 | ★★★★★ | ★★★★★ |
| filter + 伪元素 | filter: blur() | 完美支持 | 中 | ★★★☆☆ | ★★☆☆☆ |
| SVG 滤镜 | feGaussianBlur | 完美支持 | 较低 | ★★★★☆ | ★☆☆☆☆ |
| 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-: () ();
: solid (, , , );
: ;
: (, , , );
: ;
}
(: dark) {
{
: (, , , );
: solid (, , , );
}
}
{
: (, , , );
: ();
-webkit-: ();
: ;
: solid (, , , );
}
