毛玻璃效果必须用backdrop-filter: blur()配合半透明背景（如rgba）实现，::after伪元素仅作载体，需透明、绝对定位覆盖且背后有真实内容可模糊；禁用background遮挡和overflow:hidden截断。
毛玻璃效果不能只靠 ::after 实现
单用 ::after 伪元素无法真正实现毛玻璃（glassmorphism）效果——它本身不带模糊能力，必须配合 backdrop-filter: blur() 才行。而 backdrop-filter 作用于「元素背后的内容」，所以关键不是 ::after 画了什么，而是它是否「透出下层内容」并对其施加模糊。常见错误是给 ::after 加 background 或不设透明度，结果遮住了背景，模糊完全失效。
::after 必须透明且定位准确
要让 backdrop-filter 生效，::after 必须满足两个硬性条件：一是自身无遮挡色（background: transparent 或全透明 rgba），二是通过 position: absolute 覆盖在目标区域上，且父容器需有实际背景（如图片、渐变或 body 背景）供其“透过”。否则模糊对象为空，效果消失。
实操要点：
- 父容器需设置
position: relative，否则::after的绝对定位会脱离预期范围 -
::after必须显式设置content: ""，否则不渲染 - 宽高需覆盖整个父容器（常用
inset: 0或top/left/bottom/right: 0） - 务必关闭
pointer-events: none（除非你希望穿透点击），否则交互会被阻断
div.glass {
position: relative;
background: url("bg.jpg") center/cover;
}
div.glass::after {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
}
Safari 和旧版 Chrome 的兼容性陷阱
backdrop-filter 在 Safari 中支持较早但默认启用，Chrome 从 114 版本起才默认开启，更早版本需手动开启 chrome://flags/#backdrop-filter。更重要的是：如果父容器设置了 transform、will-change 或 overflow: hidden，部分浏览器会创建新的层叠上下文或隔离背景，导致 backdrop-filter 失效——模糊的不是页面背景，而是空的合成层。
规避方法：
- 避免在玻璃容器或其任意祖先上使用
transform: translateZ(0)类 hack - 检查是否有
overflow: hidden父级截断了背景传播 - Safari 下若失真，尝试加
-webkit-backdrop-filter并确保父背景非transparent - 移动端 iOS 16+ 支持良好，但 iOS 15 及更早需降级为半透明白色背景 + 阴影模拟
为什么不用 filter: blur() 替代？
filter: blur() 是对元素自身内容（包括子元素）做模糊，不是对背景；而毛玻璃核心是「背景模糊 + 内容清晰」。如果对整个容器用 filter: blur()，文字和按钮也会糊掉。有人试图用 ::after 模拟背景再模糊它，但那是静态快照，无法响应滚动或动态背景变化，且会额外增加绘制开销。真正的毛玻璃依赖 backdrop-filter 的实时背景采样能力，这是不可替代的底层机制。
真正容易被忽略的一点：毛玻璃不是视觉糖，它对性能敏感。频繁重绘区域（如跟随鼠标移动的玻璃卡片）叠加高斯模糊（blur(20px)）会导致 GPU 压力陡增，尤其在低端设备上卡顿明显。建议模糊值控制在 8px–12px，并用 will-change: transform 谨慎优化，而非滥用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
