backdrop-filter 实现毛玻璃效果需同时满足：半透背景（如 rgba）、背后有真实内容、祖先无 overflow:hidden；Safari 需 -webkit 前缀，Firefox 需手动启用或降级，blur 值推荐 4px–12px。
background-blur 不存在，别被伪类名误导
CSS 里没有 background-blur 这个属性，也不存在所谓“给背景加毛玻璃”的独立声明。毛玻璃（frosted glass）效果本质是：让元素背后的内容（通常是父容器或 body）在该元素区域内呈现高斯模糊 + 降低透明度。它依赖两个关键属性协同工作，缺一不可。
-
backdrop-filter: blur(10px)—— 对「元素后方的页面内容」做模糊（注意：不是对自身背景图！） -
background-color: rgba(255, 255, 255, 0.1)—— 提供半透色层，增强雾化感；纯 transparent 不够，会显得“空”
常见错误是只写 blur() 却忘了设半透背景，结果在浅色页上几乎看不出效果；或者误用 filter: blur()（那是模糊整个元素及其子内容，包括文字，完全不是毛玻璃）。
backdrop-filter 兼容性仍是最大拦路虎
这个属性在 Safari（macOS/iOS）支持最早最稳，Chrome 从 76+、Firefox 从 103+ 才开始支持，但 Firefox 默认仍需开启实验性标志（layout.css.backdrop-filter.enabled）。更麻烦的是：所有安卓 WebView（含微信内置浏览器）基本不支持，连 @supports (backdrop-filter: blur(1px)) 都可能返回 false。
使用前必须加降级：
立即学习“前端免费学习笔记（深入）”；
- 先写一层 solid 背景（比如
background-color: rgba(255, 255, 255, 0.8)） - 再用
@supports覆盖为毛玻璃组合 - 别指望它在微信里正常工作，要么换方案（如预渲染模糊图），要么接受 fallback
.modal {
background-color: rgba(255, 255, 255, 0.8);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.modal {
background-color: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
}
blur 值不是越大越好，性能和可读性要平衡
blur(20px) 看起来很“玻璃”，但实际有三个问题：
- 在高 DPR 屏幕（如 MacBook Retina）上，模糊半径会被放大，容易糊成一片，文字根本没法读
- 模糊计算由 GPU 完成，但过大的值仍可能触发重绘抖动，尤其在滚动区域里用
backdrop-filter - 和背景对比度有关：如果背后是密集纹理或文字，
blur(8px)已足够制造虚化感；纯色背景下blur(4px)就有明显差异
建议起步值：
- 文字浮层（如通知气泡）：
blur(4px) ~ 6px - 全屏模态框：不超过
blur(12px) - 动画中慎用：避免在
transform或opacity动画里同时驱动backdrop-filter，部分浏览器会强制切到软件渲染
父元素 overflow: hidden 会让 backdrop-filter 失效
这是最容易被忽略的坑。如果毛玻璃元素的某个祖先设置了 overflow: hidden（比如轮播容器、卡片裁剪区、Modal 的 wrapper），那么 backdrop-filter 会失效——因为浏览器认为“背后内容”被裁掉了，无可模糊。
验证方法很简单：临时把所有父级的 overflow 改成 visible，看效果是否恢复。
解决方案只有两个：
- 移除不必要的
overflow: hidden（优先检查 Modal、Card、Drawer 的 wrapper） - 如果必须裁剪，就把毛玻璃元素提到更高层级（比如挂到
body下），用position: fixed+z-index控制层叠，绕过父级裁剪限制
毛玻璃不是 CSS 的“开关式功能”，它是一条依赖渲染管线、父级布局、浏览器实现的脆弱链路。调通那一刻，往往只是因为你恰好没踩中那几个隐藏条件。
