backdrop-filter 在 chrome 和 safari 中可用，但 firefox 默认不支持；需用 @supports 检测并提供降级方案，注意 blur 值选择、堆叠上下文限制及 ios 性能问题。
backdrop-filter 在 Chrome 和 Safari 里能用，但 Firefox 默认不支持
Firefox 目前（截至 v128）仍默认禁用 backdrop-filter，即使加了 -moz-backdrop-filter 也没用。它只在 about:config 中手动开启 layout.css.backdrop-filter.enabled 才生效——这显然不能用于生产环境。所以如果你的用户群包含大量 Firefox 用户，得有降级方案。
实际做法是用 @supports 做特性检测，只对支持的浏览器启用毛玻璃：
card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari 需要 */
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
card {
background: rgba(255, 255, 255, 0.08);
}
}
注意：不要只靠 -webkit- 前缀判断，Safari 16.4+ 已支持无前缀版本，但旧版仍需前缀。
blur 值不是越大越好看，10px 以上容易糊掉文字边缘
backdrop-filter: blur() 的数值直接影响性能和可读性。实测发现：
-
blur(4px)：轻微虚化，背景图纹理仍清晰，文字对比度高 -
blur(8–12px)：典型“毛玻璃”效果，但若卡片内有细字体或小图标，边缘可能发虚 -
blur(16px)及以上：背景过度失真，尤其当背后是高对比色块或文字时，卡片内容易“融”进背景
建议优先试 blur(8px)，再根据背景复杂度微调。如果背景是纯色或渐变，blur(4px) 就够用；如果是照片，blur(10px) 更稳妥。
必须确保父容器有 backdrop-filter 的“穿透层”，否则无效
backdrop-filter 作用的是元素背后的**整个堆叠上下文**，不是它自己的背景。常见失效原因是：
- 卡片父容器设置了
overflow: hidden（比如轮播容器、Modal wrapper），会截断 backdrop 渲染层 - 卡片外层有
transform或will-change，意外创建了新的 stacking context，导致 backdrop 只作用于该 context 内部 - 卡片本身用了
position: fixed但没脱离文档流，背后内容被其他元素遮挡
最可靠的做法是让卡片直接放在 body 下，或确保其祖先元素满足：
– 没有 overflow: hidden / clip-path
– 没有 isolation: isolate（除非明确需要隔离）
– 背景层（比如 body 或 section）本身要有可见内容（图片、渐变等），纯白背景看不出效果
移动端 Safari 的 blur 性能抖动明显，慎用动画
iOS Safari 对 backdrop-filter 的硬件加速支持不稳定。如果给卡片加 transition: backdrop-filter 0.3s，滑动或滚动时容易卡顿，尤其在低端 iPhone 上。
替代方案：
- 用
opacity或transform动画代替，视觉上也能营造浮现感 - 对 iOS 设备用媒体查询关掉 blur 动画：
@media (prefers-reduced-motion: reduce), screen and (max-width: 768px) { card { backdrop-filter: blur(6px); transition: none; } } - 避免在
scroll或touchmove事件中动态修改backdrop-filter值
真正难处理的是那种既要毛玻璃、又要跟随滚动淡入的卡片——这时候不如放弃 backdrop-filter，改用半透明白色 overlay + 模糊背景图模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
