backdrop-filter需加-webkit-前缀以兼容safari和旧版chrome；blur()值须为整数px；@supports检测需同时包含带前缀和无前缀版本；firefox默认禁用该特性。
backdrop-filter 在 Safari 和旧版 Chrome 中必须加 -webkit- 前缀
因为 backdrop-filter 是 CSS Filter Effects Level 2 的特性，W3C 标准尚未完全冻结，Safari（直至 iOS 16.4 / macOS Ventura）和 Chrome 79–100 仍依赖 -webkit-backdrop-filter 才能生效。不加前缀时，这些浏览器会直接忽略该声明，连降级样式（如 background-color: rgba()）也不会触发——它不是“没效果”，而是“压根没解析”。
实操建议：
- 永远同时写两行：
backdrop-filter: blur(4px);和-webkit-backdrop-filter: blur(4px);，现代浏览器会忽略带前缀的那行，老版本 Safari/Chrome 则只认带前缀的 - 不要只靠 Autoprefixer：它默认不为
backdrop-filter加前缀（需手动配置browserslist包含safari >= 9或显式启用插件选项） - 在 iOS 17+ 和 Chrome 101+ 中，无前缀版本已稳定，但保留
-webkit-无害且省心
blur() 值为 0.5px 或小数时 Safari 直接当 0 处理
Safari 的 WebKit 渲染引擎对 blur() 的像素值做整数截断，blur(0.5px)、blur(1.8px) 全部被当作 blur(0px)，结果就是「背景没模糊，但元素也没报错」——你盯着看半天，以为是兼容性问题，其实是值写错了。
实操建议：
- 只用整数：推荐
blur(1px)、blur(4px)、blur(8px)三个档位，别试探边界 - 避免单位混用：
blur(.2rem)或blur(2vh)在 Safari 中行为不可控，一律改用px - 如果设计稿给的是小数值，向上取整——
blur(1.2px)改成blur(2px)，比留着 0.2px 更可靠
@supports 检测必须包含前缀版本才真实有效
只写 @supports (backdrop-filter: blur(1px))，在 Safari 上会返回 false，即使它实际支持 -webkit-backdrop-filter。这意味着你写的降级样式（比如纯 rgba() 背景）会被错误地覆盖，用户看到的是空白或错位背景。
实操建议：
- 检测语句要双写：
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) - 把降级样式放在
@supports块外部，确保所有浏览器都拿到基础半透背景；@supports内部只追加模糊逻辑 - 别用 JS 检测
CSS.supports()：它不识别私有前缀，且无法反映运行时渲染引擎是否真正启用该能力（比如 Firefox 默认禁用backdrop-filter，即使CSS.supports()返回true）
Firefox 用户需要手动开启才能用 backdrop-filter
Firefox 自 103 版本起支持 backdrop-filter，但默认关闭。用户访问你的页面时，即使代码完全正确，也看不到任何模糊效果——这不是你代码的问题，是浏览器策略。
实操建议：
- 不建议引导用户改
about:config，普通用户基本不会操作，也容易误调其他参数 - 在
@supports检测失败时，用更稳的降级方案：比如background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), url(...)模拟质感，而不是简单回退到纯白 - 如果项目面向内部工具或可控环境，可在部署文档里注明「推荐使用 Chrome / Safari / Edge 最新版」，把 Firefox 兼容性作为可选项而非必达目标
模糊效果是否生效，从来不只是“写了没写”的问题。它卡在前缀、整数、检测逻辑、用户环境四层薄冰上——漏掉任意一层，视觉就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
