filter: blur()不能实现毛玻璃效果，它模糊元素自身及子元素；真毛玻璃必须用backdrop-filter，需满足半透明背景、背后有可模糊内容、触发层叠上下文三条件。
直接说结论：filter: blur() 不能真正实现毛玻璃效果，它只会把你自己的内容糊掉——想做毛玻璃，必须用 backdrop-filter。
为什么 filter: blur() 不是毛玻璃
很多人一搜“CSS 毛玻璃”，看到 filter: blur(8px) 就抄，结果发现整个卡片文字也糊了，背景图倒是模糊了，但文字跟着一起发虚。这是因为 filter 作用于元素自身及其所有子元素，不是“透过玻璃看背后”，而是“把这张玻璃本身磨砂化”。你给一个 <div> 加 <code>filter: blur()，里面所有的 <h2></h2>、<p></p> 全都会变模糊。
- 常见错误现象：
filter: blur()后文字不可读、按钮点击区域错位、表单输入框光标抖动 - 使用场景限制：仅适合无文本的装饰层（比如纯色遮罩、SVG 图标、伪元素背景）
- 性能影响：值越大越卡，尤其在低配安卓机上，
blur(12px)可能导致滚动掉帧
backdrop-filter 才是正解，但得满足三个硬条件
backdrop-filter: blur(6px) 是浏览器原生支持的“真毛玻璃”，但它不是加了就生效。三个条件缺一不可：
- 目标元素背景必须半透明：
background: rgba(255, 255, 255, 0.15)—— 全透明（0）看不到玻璃感，全不透明（1）盖住背后内容 - 元素背后必须有可模糊的内容：父容器得有
background-image或其他视觉内容；如果父级是纯色background: #fff，那糊的只是白底，毫无意义 - 需要触发层叠上下文：在 Safari 或旧版 Chrome 中，
position: static元素可能失效，建议加isolation: isolate或transform: translateZ(0)
兼容性与降级方案怎么写才不翻车
Firefox 默认禁用 backdrop-filter（需手动开启 layout.css.backdrop-filter.enabled），IE 完全不支持。别指望用户去改浏览器设置。
- 加前缀保 Safari：
-webkit-backdrop-filter: blur(6px)必须写，且放在标准属性前面 - 用
@supports做优雅降级：@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .glass-card { background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } } @supports not (backdrop-filter: blur(1px)) { .glass-card { background: rgba(255, 255, 255, 0.35); /* 降级为纯半透明 */ } } - 移动端慎用大值：iOS Safari 对
blur(10px)以上渲染压力明显，实测blur(4px)~blur(8px)是平衡点
容易被忽略的细节：blur 值不是越大越好
很多人调参时一味拉高 blur() 数值，以为“越糊越高级”。实际中，blur(16px) 在 Retina 屏上常让文字边缘发散、图标细节丢失，反而削弱可读性。更关键的是，模糊半径每增加 1px，GPU 渲染开销非线性上升——尤其当多个毛玻璃卡片同时存在或伴随滚动时。
- 推荐起步值：
blur(4px)（轻量 UI）、blur(6px)（通用卡片）、blur(8px)（强对比背景） - 别用
blur(0px)来“关闭”效果：它仍会触发滤镜管线，正确做法是用 class 切换：.glass { backdrop-filter: blur(6px); } .glass.off { backdrop-filter: none; } - 避免和
filter混用：给同一容器既加backdrop-filter又加filter，Safari 渲染异常概率陡增，真机必测
