backdrop-filter: blur() 实现毛玻璃效果需满足三条件：作用于元素背后内容、背景须半透明（如rgba）、背后内容不能被overflow:hidden等截断；filter: blur()则模糊自身及子元素。
直接用 backdrop-filter: blur() 就能实现「一行 CSS」的毛玻璃模糊效果，但前提是：它只对元素「背后的内容」生效，且必须配合半透明背景 + 正确的层叠关系。单纯写 filter: blur() 会把文字也糊掉，不是真·毛玻璃。
backdrop-filter: blur() 必须满足的三个条件
很多人写了这行 CSS 却没效果，根本原因不是浏览器不支持，而是漏了关键前提：
-
backdrop-filter只作用于该元素「背后的可视内容」（比如父容器里的图片、视频、或 body 背景），不是它自己 - 该元素必须有「非完全不透明」的背景，例如
background: rgba(255,255,255,0.2)；纯background: transparent或background: none会导致模糊不可见 - 它背后的内容不能被父级的
overflow: hidden、contain: layout或isolation: isolate截断——这些会切断 backdrop 渲染链
filter: blur() 和 backdrop-filter: blur() 的核心区别
这是最常混淆的点。一句话分清：
-
filter: blur(8px)→ 模糊「这个元素自身及其所有子元素」，文字、图标、按钮全糊，适合做 loading 动画或临时遮罩 -
backdrop-filter: blur(8px)→ 模糊「这个元素背后的内容」，文字保持清晰，才是真正的毛玻璃效果 - 如果你发现用了
backdrop-filter却没模糊，先检查：是否背后真有内容？是否被z-index: -1压到看不见？是否父级加了overflow: hidden？
兼容性与降级处理（2026 年真实情况）
截至 2026 年 5 月，backdrop-filter 在 Chrome、Edge、Firefox（103+）、Safari（15.4+）均已原生支持，无需前缀。但仍有两个现实问题：
立即学习“前端免费学习笔记（深入）”；
- Safari iOS 15.4 以下（尤其是旧 iPad）仍需保留
-webkit-backdrop-filter，否则完全失效 - Firefox 在某些启用了
privacy.resistFingerprinting的隐私模式下会禁用backdrop-filter，此时建议用@supports降级为纯半透明白底 - 不要依赖 JS 检测支持与否——CSS
@supports (backdrop-filter: blur(1px))更轻量、更可靠
一行写法示例及常见翻车点
下面是一行能跑通的最小可用代码（复制即用）：
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
但实际部署时，这几个点极易出错：
- 写成
background: #fff8→ 不是所有浏览器都支持 8 位 hex，老 Edge 会当无效值解析，务必用rgba()或hsla() - blur 值设成
blur(0.5px)→ 大部分浏览器会四舍五入为 0，最小有效值建议 ≥1px - 元素本身没有设置
position: relative或z-index，导致它被其他层盖住，看起来像“没效果” - 在 flex/grid 容器中直接套用，却忘了父容器可能有
overflow: hidden（比如卡片裁圆角时常用），必须显式去掉
真正难的从来不是写哪一行 CSS，而是搞清「模糊谁」「谁在它后面」「谁把它挡住了」——这三个问题没理清，再短的代码也白搭。
