毛玻璃效果需三层结构协同：底层为真实页面背景，中层为background: transparent的父容器，上层为应用backdrop-filter的::after伪元素；任一层不透明或结构错位都会导致模糊失效。
伪元素::after本身不能直接实现毛玻璃模糊
毛玻璃效果的核心是 backdrop-filter: blur()，而 ::after 伪元素默认无法对「其背后的页面内容」做背景模糊——它只是盖在父元素之上的一个新层，背后若无透出的真实内容（比如父元素设置了 background: transparent 且下层有可穿透的 DOM），backdrop-filter 就没东西可模糊。
必须让::after能“看到”下层真实内容才能生效
关键在于层级结构和透明穿透设计。常见错误是直接给 ::after 加 backdrop-filter 却忘了父容器是否遮挡了背景：
- 父元素不能有实色
background，否则::after背后只有父元素颜色，不是页面真实背景 - 父元素需设
background: transparent，且自身不遮挡下方内容（比如 position 不影响文档流） -
::after必须设content: ""、position: absolute、铺满父容器，并保持z-index高于父内容但低于上层交互元素 - 必须启用
backdrop-filter: blur(10px)，且注意 Safari 需加-webkit-backdrop-filter
示例结构：
.glass {
position: relative;
background: transparent; /* 关键：不能写 #fff 或 rgba(255,255,255,0.8) */
}
.glass::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.15);
z-index: -1; /* 确保在父元素内容之下，但父元素本身要透明才有效 */
}blur值过大或父层遮挡会导致“假模糊”
实际调试中常遇到看似加了 backdrop-filter 却没效果，本质是视觉欺骗：
立即学习“前端免费学习笔记（深入）”；
- 如果父元素有
background: rgba(0,0,0,0.2)，::after模糊的只是这个半透黑底，不是网页背景——看起来像灰蒙蒙一片，不是毛玻璃 -
blur(20px)在高分辨率屏上可能过强，文字边缘发虚；建议从8px–14px起步微调 - Chrome 和 Edge 支持良好，但旧版 Safari（iOS 15.4 之前）不支持
backdrop-filter，需用@supports降级 - 开启
backdrop-filter可能触发合成层，滚动时偶发闪烁，可在父元素加will-change: transform缓解
真正起作用的是整个层叠上下文，不是::after单点
别只盯着 ::after 写样式。毛玻璃效果成败取决于三层关系：
- 最底层：真实页面背景（图片/渐变/其他 DOM）
- 中间层：透明父容器（
background: transparent，且不能有遮挡） - 最上层：
::after伪元素（负责模糊 + 半透底色）
漏掉任意一层，或者某层用了不透明背景，backdrop-filter 就失去意义。这也是为什么很多“复制粘贴代码”无效的根本原因——结构没对齐，不是属性写错了。
