backdrop-filter在Chrome 76+、Safari 9+（需-webkit前缀）、Edge 79+中可用，Firefox默认禁用（需手动开启layout.css.backdrop-filter.enabled），IE完全不支持；生效需元素背景半透明且背后有可模糊内容。
backdrop-filter 在哪些浏览器能用
Chrome 76+、Safari 9+、Edge 79+ 支持 backdrop-filter，Firefox 默认禁用（需手动开启 layout.css.backdrop-filter.enabled 标志，且部分版本仍不支持模糊渲染）。如果你看到毛玻璃没生效，先查 backdrop-filter 是否被浏览器忽略——打开 DevTools，选中元素，看 Styles 面板里该属性是否被划掉或标为“invalid”。
为什么加了 backdrop-filter 却没效果
常见原因不是语法错，而是「背后没有可过滤的内容」。该属性只对元素**背后区域**起作用，如果父容器背景是纯色、子元素遮挡了背景、或元素自身 background 不透明，就看不到模糊效果。
- 确保目标元素有
background: rgba(255, 255, 255, 0.1)这类半透背景（不能全透明，否则内容不可读；也不能全不透明，否则背后内容被盖住） - 确认该元素的「视觉后方」确实存在其他内容（比如 body 有图片、父容器设了
background-image） - 避免在
position: static元素上直接用——它依赖层叠上下文，建议加isolation: isolate或transform: translateZ(0)触发新层叠上下文
blur() 参数怎么选才不卡又不失真
backdrop-filter: blur(10px) 看似简单，但值越大越吃性能，尤其在移动端或低配设备上容易掉帧。10px 是临界点：多数 UI 场景下 blur(4px)～blur(8px) 就足够营造柔和感，再大反而让文字边缘发虚、细节丢失。
别用 blur(0px) 试图“关闭”效果——它仍会触发渲染管线开销；如需条件切换，用 CSS 类控制显隐更稳妥：
立即学习“前端免费学习笔记（深入）”；
glass { backdrop-filter: blur(6px); background: rgba(255,255,255,0.12); }
glass.off { backdrop-filter: none; }
和 filter: blur() 混用时的坑
backdrop-filter 作用于背后，filter: blur() 作用于自身——两者叠加会相互干扰。例如给一个半透弹窗同时加 backdrop-filter: blur(8px) 和 filter: blur(2px)，结果不是“更模糊”，而是背后内容模糊 + 自身内容糊成一团，可读性急剧下降。
- 优先用
backdrop-filter实现毛玻璃，filter留给图标/头像等独立元素做局部处理 - 若必须共存，确保
filter只用于无文本的装饰性子元素（比如伪元素、SVG 图标），避免套在含文字的容器上 - Safari 对双重模糊的渲染异常明显，测试阶段务必真机验证
backdrop-filter: blur(6px) 不管用，得同步检查它背后的画面是否真的“露出来”了，以及当前元素有没有被自己的背景完全盖死。 
