backdrop-filter 不生效时必须用 @supports 检测并降级，否则旧版 Firefox、Android 4.4 WebView 等会静默忽略；降级需用 background-color/transparent 边框/阴影组合，禁用 opacity；Firefox 需手动开启配置，移动端需限制 blur 半径，且背后内容必须可见。
backdrop-filter 不生效时，降级必须用 @supports 检测
直接写 backdrop-filter: blur(10px) 在 Firefox 旧版、Android 4.4 WebView 或 IE 中会被完全忽略，但不会报错——这导致你误以为样式“生效了”，实际用户看到的是纯色块或透明背景。必须用 @supports (backdrop-filter: blur(1px)) 包裹毛玻璃样式，否则降级逻辑根本不会触发。
常见错误是只加 -webkit-backdrop-filter 就以为兼容了 Safari 12 以下，其实那些版本连 @supports 都不支持，得靠 JS 特性检测兜底（见后文）。降级样式应写在 @supports not 块里，例如：
@supports not (backdrop-filter: blur(1px)) {
.glass {
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
}
}
降级方案不能只靠 opacity 或 transparent
opacity 会让整个元素（含文字、图标）变透明，不是毛玻璃；background: transparent 则没颜色层，blur 失去作用对象。真正可用的降级组合是：
-
background-color: rgba(255, 255, 255, 0.05)—— 极淡白底，模拟通透感 -
border: 1px solid rgba(255, 255, 255, 0.1)—— 弱边框增强轮廓，避免“消失” -
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04)—— 轻微外阴影，补层次
数值务必压低：alpha 值超过 0.1 就容易显得“脏”，尤其在深色背景上。
Firefox 用户需手动开启 layout.css.backdrop-filter.enabled
Firefox 默认禁用 backdrop-filter（即使版本 ≥ 100），用户得进 about:config 手动打开 layout.css.backdrop-filter.enabled。这意味着你无法指望它稳定支持——哪怕检测到 Firefox ≥ 100，也得按不支持处理。
更现实的做法是：
- 用
@supports+@supports not提供视觉降级 - 不依赖
prefers-reduced-motion关闭 blur（它管动画，不管滤镜） - 若业务强依赖毛玻璃效果，可 JS 检测
CSS.supports('backdrop-filter', 'blur(1px)')后加载 Canvas 模拟方案（但性能代价高，仅限关键组件）
移动端低端 Android 的模糊半径要砍半
在 Android 6–8 的 WebView 里，backdrop-filter: blur(12px) 可能直接卡顿或渲染异常。实测安全阈值是：
- Chrome for Android ≥ 80：
blur(8px)可接受 - Android WebView ≤ 71：
blur(4px)是上限，再大就掉帧 - 建议用 CSS 变量控制：
--blur-size: 4px，再通过媒体查询或 JS 动态切换
别迷信设计稿的 blur(20px)——那是在 MacBook Pro 上调出来的，放到千元机里就是滑动撕裂。
最易被忽略的点：毛玻璃效果是否生效，不取决于你写了多少滤镜函数，而取决于「背后是否有可模糊的内容」。如果父容器 overflow: hidden 或子元素 z-index 错乱，backdrop-filter 就会失效，降级方案也就成了唯一可见效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
