backdrop-filter 实现毛玻璃效果需满足三个条件：设带alpha的background-color、避免父容器overflow:hidden+border-radius、确保正确层叠顺序；必须双检测@supports并为微信/X5内核降级。
backdrop-filter 能做出真正毛玻璃效果，但写错一行、漏一个条件，它就完全不工作——不是“模糊弱”，而是“彻底透明无反应”。
为什么 backdrop-filter 写了却没效果
这不是浏览器 bug，而是它对渲染上下文极其敏感。最常见失效原因有三个：
-
background-color没设或设成transparent：它模糊的是“背后内容”，不是自己。必须用rgba(255, 255, 255, 0.15)这类带 alpha 的值，alpha 建议控制在 0.1–0.3 - 父容器用了
overflow: hidden+border-radius：Safari 会直接放弃模糊合成，显示为纯色块（尤其 iOS 16 之前版本） - 元素没处在正确的层叠顺序里：它必须位于要模糊的背景内容“之上”，且不能被
z-index: 0或position: static卡住；推荐显式设position: relative和z-index: 1
@supports 双检测才真正兜得住
单写 @supports (backdrop-filter: blur(1px)) 是假安全——它会把 iOS 15.2 前的 Safari、旧版 WebKit 内核也放行，结果是白屏或卡死。
真正可用的检测必须双条件并列：
立即学习“前端免费学习笔记（深入）”；
@supports (backdrop-filter: blur(1px)) and (-webkit-backdrop-filter: blur(1px)) {
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
@supports not ((backdrop-filter: blur(1px)) and (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
}
注意 fallback 的透明度必须明显更高（0.7 vs 0.1），否则在微信/X5 内核里打开文字直接看不清。
blur 值选 4–8px 最稳妥
数值不是越大越好：
-
blur(2px)几乎看不出效果；blur(20px)在部分 Android WebView 中会触发严重卡顿甚至崩溃 - 实测在主流设备上，
blur(6px)~blur(8px)平衡了视觉质感与渲染开销 - 若需增强层次感，可叠加
saturate(1.5)或brightness(0.95)，但避免同时加多个函数——某些低端机型会跳过整条规则
微信/X5 内核必须降级处理
微信内置浏览器（X5 内核）至今不支持 backdrop-filter，哪怕加了 -webkit- 前缀也无效。
不能只靠 @supports 检测，必须配合运行时判断或 UA 特征识别：
- 检测
navigator.userAgent是否含MQQBrowser或MicroMessenger - 降级方案优先用
background: rgba(255,255,255,0.7)+box-shadow，别用半透 +filter: blur()——那会把整个容器连同子元素一起糊掉 - 若设计稿强依赖模糊感，可在微信中改用静态模糊图作为背景（
background-image），但需提前生成多尺寸版本
真正麻烦的不是“怎么写”，而是“怎么让不同环境都看起来像一回事”——模糊值、透明度、阴影强度、fallback 颜色，这些参数之间存在强耦合，调一个就得全盘重测。
