backdrop-filter: blur() 在某些设备上无效，主因是父容器无透明背景、overflow: hidden 或浏览器未启用该特性；blur 值宜选 1px–8px，避免小数；兼容需用 @supports 降级为半透背景，禁用 filter polyfill；与 background-image 混用时应分离图层。
backdrop-filter: blur() 为什么在某些设备上完全没效果
因为 backdrop-filter 默认不触发硬件加速，且受父元素叠加上下文（stacking context）和透明度影响。最常见的情况是：父容器没设 background-color 或用了 rgba(0,0,0,0)，导致浏览器认为“背后没有可模糊的内容”，直接跳过渲染。
- 必须确保该元素的背景是半透或透明的（比如
background-color: rgba(255,255,255,0.1)），否则模糊不可见 - 父元素不能有
overflow: hidden（会裁剪模糊区域的扩散像素） - Chrome 和 Safari 支持较好，但 Firefox 默认禁用（需手动开启
layout.css.backdrop-filter.enabled） - iOS 13+、macOS Safari 均支持；Android Chrome 79+ 支持，但低端机型可能降级为纯透明
blur() 参数怎么选才不糊成一片或毫无变化
blur() 的值不是越大越好，它直接影响性能和视觉合理性。1px～8px 是实用区间，超出后模糊边缘会明显膨胀、细节丢失严重，且重绘开销陡增。
-
blur(1px)：适合文字浮层，轻微柔化边缘，性能几乎无感 -
blur(4px)：典型毛玻璃效果，背景内容可辨但无干扰，推荐作为默认起点 -
blur(8px)：仅用于大尺寸模态框或强氛围场景，注意 iOS 上可能触发额外合成层，卡顿风险上升 - 避免使用
blur(0.5px)或小数——多数浏览器会向下取整为0px，等于没开
如何兼容不支持 backdrop-filter 的老浏览器
不能只靠 @supports 加一层样式就完事。真正在意体验时，得提供视觉一致的降级方案，而不是让背景突然变实色。
- 用
@supports (backdrop-filter: blur(1px))包裹毛玻璃规则，内部同时设置background-color: rgba(255,255,255,0.1) - 在外部写一份不带
backdrop-filter的规则，用半透色模拟近似质感（比如rgba(255,255,255,0.15)） - 不要依赖 JS 检测：CSS 原生支持检测更可靠，JS 判断容易误判（如 Safari 私有前缀未处理）
- 慎用滤镜 polyfill（如
filter: blur()）——它模糊的是整个元素自身，不是背后内容，语义和效果都错位
和 background-image 混用时的坑
如果背景是渐变或图片，backdrop-filter 依然生效，但模糊区域会包含图片 / 渐变本身——这通常不是你想要的。真正毛玻璃感，需要背后是「页面其他内容」，而不是本元素的背景。
立即学习 “ 前端免费学习笔记（深入）”；
- 把图片 / 渐变放在伪元素（
::before）里，并设z-index: -1，主元素保持透明背景 - 避免给同一元素同时设
background-image和backdrop-filter，否则模糊会作用在图片上，产生奇怪的“内发光”感 - 如果必须叠加图层，用
isolation: isolate确保 backdrop-filter 不被意外隔离失效
