firefox 102及更早版本不支持backdrop-filter，103+虽默认启用但企业环境常禁用硬件加速致失效；必须用js运行时检测css.supports('backdrop-filter','blur(1px)')并动态添加降级类，不可依赖@supports。
Firefox 102 及更早版本压根不支持 backdrop-filter，不是“没开”，是引擎里没实现；103+ 虽默认启用，但企业环境常禁用硬件加速（gfx.webrender.all），导致实际仍失效。不能靠 CSS 自动降级，必须用 JS 运行时检测 + 视觉等效替代。
用 JavaScript 实时检测是否真正可用
别信 @supports (backdrop-filter: blur(1px)) —— Firefox 102 会直接跳过整条规则块，连降级样式都收不到。必须在 DOM ready 后、内容渲染前执行运行时判断：
- 调用
window.CSS && CSS.supports('backdrop-filter', 'blur(1px)')，返回false就立刻加降级类名，比如el.classList.add('glass-fallback') - 检测值别用
blur(0)，它在部分 Android WebView 里能通过但实际不生效；改用blur(1px)更可靠 - 别等图片 lazyload 完再检测——模糊区域若依赖背景图，图还没加载完就加了 fallback 类，视觉会突变
静态背景图：伪元素 + filter: blur() 模拟
如果毛玻璃容器背后是固定背景图（比如 banner 图或渐变），可绕过 backdrop-filter 限制，用伪元素叠加并模糊：
- 给容器设
position: relative，再用::before绝对定位覆盖全区域 -
::before的background-image复制父容器背景，加上filter: blur(4px)和z-index: -1 - 主容器自身只保留半透背景：
background-color: rgba(255,255,255,0.12)，不设overflow: hidden，否则伪元素会被裁剪 - 注意：这模糊的是那张图本身，不是“背后滚动的内容”，所以仅适用于静态场景
动态内容（如滚动页、用户头像）：降级为视觉质感匹配
当背后是真实 DOM（比如弹窗下有滚动列表、头像浮层下有用户资料），无法用伪元素预模糊——此时必须放弃“真模糊”，转而匹配玻璃态的视觉意图：
- 基础层用
background-color: rgba(255,255,255,0.08)+border-radius: 12px+backdrop-filter不支持时的微弱box-shadow: 0 2px 12px rgba(0,0,0,0.05) - 避免用
transparent或rgba(0,0,0,0)—— Firefox 会跳过取样，直接当无背景处理 - 文字对比度必须达标：降级后至少保持 WCAG AA 级（深色文字在浅色背景上对比度 ≥ 4.5），别为了“通透”牺牲可读性
- 极端情况（如需模糊用户上传头像）可尝试
canvas+ctx.filter = "blur(2px)"，但仅 Chrome/Firefox 支持，fallback 建议用opacity: 0.85+transform: scale(1.01)模拟轻微虚化感
最常被忽略的一点：Firefox 用户看到的不是“模糊弱”，而是“完全没模糊”。所以降级不是补个透明色就完事，得让那个“没模糊”的状态，看起来依然像一块玻璃——颜色、边缘、光影都要往这个质感上靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
