backdrop-filter在Chrome 76+、Firefox 102+、Safari 9+（macOS/iOS）原生支持，但Windows版Chrome和旧版Edge（EdgeHTML）完全不支持；生效需元素半透明且背后有可模糊内容，避免overflow:hidden或新层叠上下文阻断采样。
backdrop-filter 在哪些浏览器里能用
Chrome 76+、Firefox 102+、Safari 9+（macOS/iOS）原生支持 backdrop-filter，但 Windows 版 Chrome 和旧版 Edge（基于 EdgeHTML）完全不支持，哪怕开启实验性标志也不行。Firefox 直到 102 才默认启用，此前需手动开启 layout.css.backdrop-filter.enabled。如果你的用户有大量 Windows + Firefox 100 以下版本，就得准备降级方案。
为什么加了 backdrop-filter 却没效果
常见原因不是语法写错，而是元素没“透出”背景——backdrop-filter 只对「背后的内容」起作用，不是给自身加滤镜。它要求：元素必须是半透明/透明的（background-color: rgba(255,255,255,0.8) 或 background: none），且父容器或更上层要有可被模糊的视觉内容（比如 body 有背景图，或兄弟元素有 z-index 更低的图层）。如果父元素设置了 overflow: hidden，也可能裁掉被模糊的区域边界，导致看起来像没生效。
- 检查是否漏写了
background的透明通道，纯rgba(0,0,0,1)或#000会挡住背后内容 - 确认该元素没有被
isolation: isolate或transform（如translateZ(0)）意外创建了新的层叠上下文，阻断了 backdrop 采样 - 在 Safari 上，如果父元素用了
backdrop-filter，子元素再用可能失效——Safari 对嵌套 backdrop 的支持不稳定
如何让毛玻璃遮罩响应滚动或悬停变化
backdrop-filter 本身支持 CSS 过渡（transition: backdrop-filter 0.3s ease），但仅限于值的变化，比如从 blur(0px) 到 blur(12px)。不能直接用 @keyframes 动画，因为规范不支持动画化该属性（Chrome 会忽略，Firefox 报 warning）。实际做法是：用 class 切换控制 blur 值，配合 transition；或者用 JS 监听 scroll 或 mousemove，动态设置 style.backdropFilter。
示例（hover 动态模糊）：
立即学习“前端免费学习笔记（深入）”；
dialog.overlay {
backdrop-filter: blur(4px);
transition: backdrop-filter 0.2s;
}
dialog.overlay:hover {
backdrop-filter: blur(12px);
}
注意：频繁触发 scroll 时直接设 style 会导致性能抖动，建议节流 + 使用 will-change: backdrop-filter（仅当确实需要时，它本身有内存开销）。
移动端 iOS 上的特殊限制
iOS Safari 要求启用 backdrop-filter 的元素必须满足两个条件：一是不能有 pointer-events: none（否则滤镜失效），二是不能是 position: fixed 且 viewport 高度超过 100vh 的元素（超出部分 backdrop 不渲染）。另外，iOS 15.4 之前，如果页面启用了 viewport 的 user-scalable=no，backdrop-filter 会整体禁用——哪怕只是临时加这个 meta，也得同步移除或改用 maximum-scale=1。
真机调试时容易忽略的一点：Xcode 模拟器默认关闭硬件加速，backdrop-filter 显示为灰色块而非模糊效果，必须在真机或开启 GPU 加速的模拟器中验证。
