CSS 实现毛玻璃模糊背景效果实战
这是现代前端 UI 设计中非常流行的视觉效果，常用于模态框、侧边栏、卡片悬浮或导航栏的半透明磨砂感设计。相比传统的图片模糊，CSS 方案性能更好且易于维护。
核心方案对比
目前主流的实现方式主要有以下几种，其中 backdrop-filter 是首选：
| 方案 | 核心属性 | 浏览器支持 | 性能 | 推荐指数 |
|---|---|---|---|---|
| 1 | backdrop-filter: blur() | 极好（几乎全覆盖） | 中～高 | ★★★★★ |
| 2 | filter: blur() + 伪元素 | 完美支持 | 中 | ★★★☆☆ |
| 3 | SVG 滤镜 | 完美支持 | 较低 | ★☆☆☆☆ |
| 4 | Canvas/WebGL | 完美支持 | 较低～中 | ★★☆☆☆ |
结论： 99% 的现代项目直接使用 backdrop-filter: blur() 就够了，性能与效果的性价比最高。
推荐写法详解
最经典的毛玻璃卡片需要三件套：半透明背景、模糊滤镜、以及可选的饱和度提升。
/* 毛玻璃卡片基础样式 */
.glass-card {
/* 核心三件套 */
background: rgba(255, 255, 255, 0.18); /* 半透明白色 */
backdrop-filter: blur(16px) saturate(180%); /* 模糊 + 饱和度提升 */
-webkit-backdrop-filter: blur(16px) saturate(180%); /* 兼容旧 Safari */
/* 边框（可选，但强烈推荐） */
border: 1px solid rgba(255, , , );
: ;
: (, , , );
: ;
}
(: dark) {
{
: (, , , );
: solid (, , , );
}
}
{
: (, , , );
: ();
-webkit-: ();
: ;
: solid (, , , );
}
