真正毛玻璃效果必须用backdrop-filter而非filter: blur()，因后者模糊元素自身及子内容，而backdrop-filter仅模糊元素背后可见区域，需配合rgba背景、避免opacity和overflow:hidden干扰，并注意单位、兼容性及降级方案。
不能用 filter 制作真正的毛玻璃模糊过渡 —— 它会模糊自身内容，不是“背后”的内容。
为什么 filter: blur() 不是毛玻璃
filter 作用于元素自身及其所有子元素，模糊的是整个渲染盒（包括文字、边框、图标），结果是“灰蒙蒙一团”，背景图或父级内容被盖住、无法透出。真正毛玻璃必须模糊“元素背后”的像素，这只能靠 backdrop-filter。
常见错误现象：
- 加了
filter: blur(8px)后，文字也糊了，根本看不清 - 卡片边缘发虚、阴影消失，失去立体感
- 滚动时模糊区域卡顿、掉帧，尤其在 iOS Safari 上
backdrop-filter 的正确分层结构
毛玻璃生效的前提是：上层元素能“看到”它下面的内容。这意味着必须避免意外创建隔离合成层。
立即学习“前端免费学习笔记（深入）”；
- 父容器不能有
overflow: hidden、will-change: transform或clip-path，否则背后像素采样被截断 - 毛玻璃元素自身不能设
opacity（哪怕opacity: 0.99），否则强制隔离上下文，backdrop-filter失效 - 透明度必须写进
background-color: rgba(255,255,255,0.12)的 alpha 通道，而不是靠opacity - 渐变不能写在毛玻璃元素的
background里，否则模糊的是“渐变+图片”的合成结果，不是原始背景
让过渡自然不突兀的关键参数
直接写 transition: backdrop-filter 0.3s ease 是无效的 —— 浏览器不支持该属性动画。必须换思路：
- 只对
background-color做过渡：transition: background-color 0.3s ease，靠调整 rgba 的 alpha 值控制“透光感”强弱 -
blur()值必须用px单位，rem或%会被忽略或行为异常 - 起步用
blur(4px)～blur(8px)，Retina 屏上blur(6px)已足够重；iOS 16.5 以下慎用超过blur(10px) - 加
saturate(150%)可抵消模糊带来的灰暗感，增强通透性，但别超过saturate(200%)，否则失真
Safari 和旧版浏览器的兼容兜底
backdrop-filter 在 Safari 上必须带 -webkit- 前缀，且 iOS 15.4 之前版本存在闪黑屏、边缘锯齿问题。不能只靠前缀解决：
- 用
@supports (backdrop-filter: blur(1px))包裹毛玻璃样式，确保只在支持环境启用 - 降级方案用纯
rgba()背景（无模糊），而非伪元素 +filter模拟 —— 后者性能差、保真度低、滚动易撕裂 - 微信内置浏览器（X5 内核）对
backdrop-filter支持极不稳定，建议在UA检测到 X5 时直接禁用
最易被忽略的一点：毛玻璃效果是否生效，和父容器有没有「真实内容」直接相关。如果背后只是空 div 或纯色 background-color，backdrop-filter 就没东西可模糊 —— 它不是滤镜，是“采样器”。
