backdrop-filter 不支持 css 变量插值，需用 @property（chromium/safari）或预设 class 兜底；@property 必须声明 syntax: ""、inherits: false，transition 写在 backdrop-filter 上；父容器背景须 transparent 且背后有可模糊内容。
毛玻璃效果为什么不能直接用 backdrop-filter + CSS变量？
因为 backdrop-filter 的值（比如 blur(10px)）本身不支持 CSS 变量插值——你写 blur(var(--blur-radius)) 会完全失效，浏览器直接忽略整条声明。这不是语法错误，而是规范限制：滤镜函数参数不参与 CSS 变量计算。
所以必须绕道：用 JS 动态拼接字符串，或用 CSS 自定义属性配合 @property（仅 Chromium 系支持），或退而求其次，用预设类名切换。
推荐方案：用 @property 声明可动画的 CSS 变量
这是目前唯一能让 backdrop-filter: blur() 真正响应变量变化、还能做平滑过渡的方式，但只在 Chrome/Edge 110+ 和新版 Safari（需开启实验特性）中可用。
关键点：
-
@property必须显式声明syntax: "<length>"</length>，否则无法被blur()消费 - 必须加
inherits: false（blur()不继承） - 过渡要写在
backdrop-filter上，不是变量上
@property --blur-radius {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
.glass {
backdrop-filter: blur(var(--blur-radius));
transition: backdrop-filter 0.3s ease;
}</length>
然后 JS 控制：element.style.setProperty('--blur-radius', '12px')，就能触发平滑模糊变化。
兼容性兜底：用 class 切换预设值
当目标环境不支持 @property（如 Firefox、旧 Safari），最稳的方式是预先定义若干 class，用 JS 切换：
.glass-0 { backdrop-filter: blur(0px); }
.glass-4 { backdrop-filter: blur(4px); }
.glass-8 { backdrop-filter: blur(8px); }
.glass-12 { backdrop-filter: blur(12px); }
这样既避免 JS 拼字符串的维护成本，又保证所有浏览器行为一致。注意两点：
- 别用
blur(0)完全关闭——它仍会触发渲染层合成，影响性能；用none更干净 - 预设值建议按 4px 阶梯递增，人眼对 1–2px 变化不敏感，反而增加无效重绘
容易被忽略的坑：backdrop-filter 的层叠与透明背景
毛玻璃不会“透过”父容器显示背后内容，它只作用于**该元素背后的 stacking context 下的内容**。常见翻车点：
- 父容器加了
background: rgba(255,255,255,0.8)？那backdrop-filter就只能模糊这个半透层，而不是页面底层——得把背景设为transparent - 元素没设置
background或用了纯色背景？毛玻璃就失去意义，看起来像普通模糊块 - 父级有
overflow: hidden？可能裁掉模糊扩散区域，建议加padding或用margin留白
真正起作用的最小结构是：position: relative 容器 + background: transparent + 子元素内容清晰可见 + 背后有可模糊的 DOM 层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
