CSS毛玻璃效果实现原理与多场景应用

毛玻璃（Glassmorphism）是近年流行的 UI 风格，核心是 backdrop-filter: blur() 滤镜。

基本原理

backdrop-filter 会对元素背后的内容应用滤镜效果，配合半透明背景色即可产生磨砂质感。

完整示例

.glass {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  border-radius: 12px;
}

兼容性处理

Firefox 需要加 -webkit-backdrop-filter 前缀，旧版浏览器可降级为纯半透明背景。

毛玻璃效果广泛用于导航栏、卡片、弹窗等场景，能营造层次感和现代感。