backdrop-filter 生效需满足两个条件：元素必须有透明区域，且父容器不能遮挡背后画面；调试时若失效，需用开发者工具 Layers 面板检查隐式合成层干扰。
Backdrop-filter 要生效，必须满足两个硬性条件：元素要有透明区域（比如 background: transparent 或带 alpha 的 rgba），且父容器不能遮挡其背后的画面——这意味着它不能是 document.body 直接子元素，也不能被 opacity
为什么 backdrop-filter 在 div 上完全没反应？
最常见的失效原因是：元素背后没有「可被滤镜作用的内容」。backdrop-filter 不是给自身加模糊，而是对「该元素背后、透过其透明区域可见的那些像素」做处理。
- 检查父容器是否设置了
overflow: hidden或clip-path，它们会剪裁背景内容，导致 backdrop-filter 失效 - 确认该元素本身有透明度或半透背景，例如
background: rgba(255, 255, 255, 0.1)，纯白色background: white会挡住一切 - 避免在祖先链上使用
will-change: transform、opacity: 0.99或transform: translateZ(0)，这些会创建独立层叠上下文，切断 backdrop-filter 的取景路径
如何兼容 Safari 并避免白屏闪烁？
Safari 对 backdrop-filter 的实现更严格，尤其在页面滚动或动态插入时容易触发渲染异常，表现为短暂白块或滤镜消失。
- 强制开启硬件加速：给元素添加
transform: translateZ(0)（注意：只加在该元素自身，不要加在祖先上） - 用
-webkit-backdrop-filter前缀，Safari 14+ 才支持无前缀版本，但加上更稳 - 避免在
:hover中突然启用 backdrop-filter，改用transition: backdrop-filter 0.2s ease并预先声明初始值（如backdrop-filter: blur(0)） - 若用于模态框，确保其父容器有明确的
background-color（哪怕透明），否则 Safari 可能回退到白底
blur 值设多大才不卡又够用？
blur 半径不是越大越好。超过 12px 后性能下降明显，尤其在移动端或高 DPI 屏幕上，iOS Safari 容易掉帧。
立即学习“前端免费学习笔记（深入）”；
- 推荐范围：
blur(4px)到blur(10px)，兼顾视觉效果与流畅度 - 慎用
blur(0)+ 过渡动画模拟“开关”，因为 Safari 在 blur(0) 时仍会参与合成，不如用backdrop-filter: none显式关闭 - 如果搭配
rgba()背景，建议 blur 值与 alpha 成反比：alpha 越低（越透明），blur 可稍大；alpha 接近 1 时，blur > 6px 就容易糊成一片
真正麻烦的从来不是写那行 backdrop-filter: blur(8px)，而是调试时发现它被某个看不见的 z-index 或隐式层叠上下文悄悄屏蔽了——这时候得打开开发者工具的「Layers」面板，一层层看渲染树里有没有意外的合成层挡在中间。
