backdrop-filter没反应的主因是背景不透明且背后无内容可模糊；必须用rgba/hsla设alpha值（0.08–0.3）、加-webkit前缀、禁用overflow:hidden、确保元素有独立合成层。
backdrop-filter写了却没反应，大概率是背景不透明
它模糊的是元素「背后」的内容，不是自身。如果background-color: white或background: #fff，背后像素全被盖住，滤镜自然失效。必须用rgba()或hsla()显式声明 alpha 值，推荐范围：0.08–0.3（深色主题可稍高，如rgba(30, 30, 46, 0.4)）。transparent也不行——它不提供遮罩层，视觉上像挖洞，不是玻璃。
Safari 必须写 -webkit-backdrop-filter，且不能只靠 @supports 检测
@supports (backdrop-filter: blur(1px))在 iOS 15.2 之前会误判为支持，结果白屏或卡死。真正兜得住的写法是：@supports (backdrop-filter: blur(1px)) and (-webkit-backdrop-filter: blur(1px))。Safari 16.4 之前只认-webkit-backdrop-filter，漏掉就等于没写。现代版本也别省，双写更稳。
父容器 overflow: hidden 是静默杀手
这个属性会直接裁剪 backdrop 渲染所需的像素扩散区域，尤其在配合border-radius时，Safari 可能整块放弃合成。常见陷阱包括：.navbar-collapse、.container、甚至body设了overflow: hidden。验证方法：临时给毛玻璃元素加border: 1px solid red，看模糊是否出现在红框「背后」——不是，则问题出在父级裁剪或层级断链。
滚动时模糊变实色，本质是合成层丢失
浏览器没把该元素提升为独立合成层，backdrop 渲染被中断。加transform: translateZ(0)或will-change: transform可强制 GPU 合成。但注意：position: fixed元素若套在带transform或filter的祖先节点里，backdrop 只模糊局部区域；也别把它塞进默认overflow: hidden的组件（比如 Bootstrap 的.navbar-collapse），得单独重置父容器样式。
立即学习“前端免费学习笔记（深入）”；
真正难的不是写对backdrop-filter: blur(8px)，而是判断哪些父容器的overflow、will-change、甚至微信 X5 内核的裁剪策略，正在悄悄切断背后像素的采样路径。 
