要实现毛玻璃效果必须满足两个条件：元素背景透明且背后有可模糊内容；backdrop-filter 模糊的是元素背后区域，filter 模糊的是元素自身，二者本质不同。
直接用 backdrop-filter: blur() 就能实现毛玻璃效果，但必须满足两个硬性条件：元素得是「透明的」且「背后有内容可模糊」；否则在大多数浏览器里根本看不到模糊。
为什么写了 backdrop-filter 却没效果
最常见的原因是背景完全不透明——比如设置了 background-color: white 或 background: #000，这会挡住背后的层，backdrop-filter 就失去作用对象。
- 必须让当前元素「透」：用
background-color: rgba(255, 255, 255, 0.8)或background: transparent - 父容器或更外层得有可被模糊的内容（比如带图片/文字的
或某个<div class="bg">）<li>不能对 <code>或直接加backdrop-filter，它只作用于「自身背景区域后方的堆叠上下文」，不是整个页面 - Chrome 和 Safari 支持良好，Firefox 默认关闭该特性（需用户手动开启
layout.css.backdrop-filter.enabled） -
filter模糊的是「自己」，backdrop-filter模糊的是「背后」 -
filter会连文字一起糊掉，backdrop-filter下的文字依然锐利可读 -
backdrop-filter对性能更友好（尤其滚动时），因为它不重绘元素自身 - 两者可共存：比如先用
backdrop-filter模糊背景，再用filter: drop-shadow()给卡片加阴影
backdrop-filter 和 filter: blur() 的本质区别
filter: blur() 是对元素自身及其所有子元素整体做高斯模糊，像盖了层毛玻璃贴纸；而 backdrop-filter 只模糊「这个元素所占据区域后方的内容」，自身内容保持清晰——这才是真·毛玻璃。
一个可靠可用的毛玻璃卡片写法
以下代码在 Chrome/Safari 中开箱即用，Firefox 用户需确认已启用对应 flag：
.glass-card {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); /* Safari 必须加前缀 */
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 1.5rem;
}
<p>/<em> 确保父容器有内容可被模糊 </em>/
.glass-container {
background: url("hero.jpg") center/cover;
min-height: 100vh;
}
</p>
-
-webkit-backdrop-filter在 Safari 中不可省略，即使现代版本也建议保留 -
blur()值不是越大越好：超过20px容易导致边缘色块感明显，推荐8px–16px区间 - 避免在
position: fixed元素上滥用——某些安卓 WebView 会失效或闪烁 - 如果模糊区域边缘出现锯齿，可加
transform: translateZ(0)强制硬件加速（但慎用，可能引发其他渲染问题）
最常被忽略的一点：毛玻璃不是纯视觉装饰，它依赖真实的内容层次。没有「背后的内容」，就没有「玻璃」；没有「恰当的透明度」，就没有「毛」的感觉。调参前先检查 DOM 结构和背景来源是否真的存在。
