firefox未实现backdrop-filter，需用@supports (backdrop-filter: blur(1px)) and (-webkit-backdrop-filter: blur(1px))双条件检测，并在外层提供rgba背景降级，确保文字可读。
Firefox 根本不支持 backdrop-filter，不是“没开”而是“没实现”
Firefox 从 Gecko 引擎层面未实现 backdrop-filter，哪怕加 -moz-backdrop-filter 也无效。它不会报错、不会降级显示半透明背景，而是直接忽略整条声明——你写的 backdrop-filter: blur(8px) 在 Firefox 里等于没写。
@supports 检测必须用双条件，单写会误判
只写 @supports (backdrop-filter: blur(1px)) 是危险的：旧版 Safari（如 iOS 15.2 前）、某些 WebKit 内核（比如微信 X5）也会通过检测，结果是白屏或卡死。
真正可用的检测必须同时满足两个条件：
@supports (backdrop-filter: blur(1px)) and (-webkit-backdrop-filter: blur(1px))- 降级样式必须写在
@supports外层，且透明度要明显更高（比如background: rgba(255, 255, 255, 0.7)），否则在 Firefox 或微信里文字直接看不清
别指望前缀或 JS 检测能绕过限制
加 -moz-backdrop-filter 是徒劳的，Firefox 不识别；用 JS 判断 getComputedStyle(el).backdropFilter 也靠不住——Safari 可能返回空字符串，Chrome 返回值但实际未生效，结果更混乱。
唯一可靠路径是纯 CSS 的功能检测 + 视觉一致的降级：
- 基础层先定义
background: rgba(255, 255, 255, 0.7)+border-radius+ 轻微box-shadow - 再用双条件
@supports包裹增强层，把透明度降到0.15、加上backdrop-filter和-webkit-backdrop-filter - 所有关键文字对比度必须满足 WCAG，在降级后仍可读
最常被忽略的一点：Firefox 用户看到的不是“模糊弱”，而是“完全没模糊”——所以降级不能只是换颜色，得模拟质感
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
