CSS 如何实现毛玻璃效果？

Question

CSS 如何实现毛玻璃效果？

仓乃文 · Accepted Answer

毛玻璃效果（Glassmorphism）通过 backdrop-filter 属性实现，让元素背后的内容透过半透明层呈现模糊效果，常用于卡片、弹窗等场景。

基础实现：
```css
.glass {
  background: rgba(255, 255, 255, 0.2);  /* 半透明白色背景 */
  backdrop-filter: blur(10px);            /* 模糊背景 */
  -webkit-backdrop-filter: blur(10px);    /* Safari 兼容前缀 */
  border: 1px solid rgba(255, 255, 255, 0.3);
}
```

暗色主题变体：
```css
.glass-dark {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
```

补充说明：
- backdrop-filter 兼容性已较好，Chrome、Safari、Edge、Firefox 均支持
- 模糊效果消耗 GPU，移动端大面积使用需谨慎
- 背景色透明度不能太低，否则模糊效果不明显
- 降级方案可以只保留半透明背景不做模糊