backdrop-filter没效果的首要原因是背后无真实内容可模糊，必须确保元素下方有图片、文字或渐变等dom内容，且父容器未设overflow:hidden或transform干扰层叠上下文。
backdrop-filter没效果，先查背后有没有内容可模糊
写了backdrop-filter: blur(8px)却完全没反应？大概率不是语法错，而是它“滤了个寂寞”——backdrop-filter只作用于元素**视觉后方的真实 DOM 内容**，不是模糊自身、父背景或空白区域。
验证方法很直接：临时给目标元素加background: rgba(255, 255, 255, 0.3)和border: 1px solid red，然后滚动页面或拖动窗口，看红框背后是否出现模糊。如果背后是纯白/纯黑/空 div，那就注定无效。
- 确保父容器（比如
或某个<div class="bg">）有真实内容：图片、文字、渐变色、滚动列表等 <li>移除父级的<code>overflow: hidden——它会裁掉模糊所需的像素扩散区，iOS Safari 尤其敏感 - 避免用
position: absolute却不设z-index，否则可能和 body 同层，背后只剩白底 - 别在
transform或will-change: transform触发新层叠上下文的容器里嵌套毛玻璃元素 -
blur(1px)–blur(4px)：适合导航栏、小浮层，边缘柔化明显但文字锐利 -
blur(6px)：推荐默认起点，搭配background-color: rgba(255, 255, 255, 0.12)质感与性能较平衡 -
blur(8px)：仅用于大尺寸模态框，且建议提前加will-change: backdrop-filter触发合成层 - 避免
blur(0.5px)或奇数小数——多数浏览器向下取整为0px，等于没开 - Safari 必须写
-webkit-backdrop-filter前缀，即使现代版本也建议保留 - Firefox 用户看到的是纯白背景或无模糊——这不是 bug，是标准未启用
- 若业务必须兼容 Firefox，得用降级方案：比如对静态背景图，用
background-attachment: fixed叠加一层模糊图片；动态背景则需 JS 截图 + Canvas 模糊模拟，成本高 - 别用
backdrop-filter: none动态关闭；用 class 切换更稳妥：.glass.off { backdrop-filter: none; } - 优先用
position: sticky替代fixed，尤其当侧边栏高度小于视口时，渲染压力小得多 - 若必须用
fixed，确保其父级（如）有明确高度，且不设overflow: hidden - 绝对禁止在毛玻璃元素上叠加
transform: translateZ(0)或will-change: transform，它们会干扰合成层逻辑 - 模糊值别超过
blur(8px)；实测blur(6px)在中端安卓机和 iOS 16+ 上帧率更稳
blur()值怎么选才不糊又不卡
blur()参数不是越大越高级，它是高斯模糊半径，单位只能是px或rem，数值直接影响 GPU 合成压力和文本可读性。
Safari 和 Firefox 的兼容性绕不过去
Chrome 76+、Edge 79+、Safari 9+（macOS/iOS 原生支持最好）都支持backdrop-filter，但 Firefox 默认关闭该特性（需用户手动开启layout.css.backdrop-filter.enabled），IE 和旧版 Edge 完全不支持。
响应式侧边栏用 backdrop-filter 卡顿怎么办
移动端滚动时掉帧、漏动画，常因position: fixed导致浏览器实时模糊背后动态内容，GPU 压力陡增。
真正难的不是写对那一行 CSS，而是判断「背后有没有东西可模糊」和「当前设备能不能撑住这个模糊」——这两个问题不确认，代码再漂亮也没用。
