backdrop-filter 不支持 css 变量直接插值，blur(var(--x)) 会静默失效；需通过类名切换、@supports 块或 js 动态设置 style.backdropfilter 实现“动态毛玻璃”，且须确保渲染树存在可模糊背景层。
backdrop-filter 本身不支持 CSS 变量直接插值（比如 blur(var(--blur-radius))），所以“动态毛玻璃”不是靠变量驱动滤镜参数实时变化，而是靠变量控制类名切换、媒体查询响应或 JavaScript 注入——本质是用变量做状态代理，而非算术参与。
为什么 blur() 里不能直接用 var(--x)
CSS 函数参数（如 blur()、translate()）只接受计算值（calc()）或字面量，不解析自定义属性。写成 backdrop-filter: blur(var(--radius)); 会完全失效，浏览器连警告都不报，静默忽略整条声明。
- 验证方式：开发者工具中该属性显示为 strike-through 灰色，且 Layers 面板看不到模糊层
- 替代方案只有两种：
calc()（仅限加减乘除单位换算，不能用于blur参数）或 JS 动态写内联样式 - Tailwind 的
backdrop-blur-sm等类名也是预设固定值，背后仍是静态规则，不是运行时计算
用 CSS 变量配合 @media 或 :root 切换实现“伪动态”
适合响应式场景，比如深色模式切换、窗口缩放时调整模糊强度。核心是把变量作为开关，触发不同预设的 @supports 块。
- 定义变量：
:root { --glass-blur: 12px; --glass-alpha: 0.1; } - 在
@supports内引用：background-color: rgba(255, 255, 255, var(--glass-alpha)); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); - 注意：Safari 旧版只认
-webkit-backdrop-filter，必须同时写两遍；Firefox 需确保layout.css.backdrop-filter.enabled已开启 - 变量不能在
@supports外部生效——它只对当前作用域内声明有效，别指望从外部 JS 修改:root后自动重绘滤镜
真正动态：JS 修改 style.backdropFilter 并绑定事件
需要实时响应滚动、鼠标移动或用户拖拽滑块时，必须用 JS。CSS 变量只负责存储，JS 负责读取并注入样式。
- HTML 中加一个范围输入：
<input type="range" min="0" max="24" value="12" id="blur-slider"> - JS 绑定：
slider.addEventListener('input', () => { el.style.backdropFilter = `blur(${slider.value}px)`; }); - 关键点：必须用
el.style.backdropFilter（不是cssText），否则 Safari 可能不重绘；同时设置el.style.backgroundColor = `rgba(255,255,255,${0.05 + slider.value * 0.01})`保持半透感同步 - 性能提醒：高频触发（如 scroll）要节流，
backdrop-filter每次变更都会触发合成层重建，连续改可能卡顿
最常被忽略的是：哪怕变量和 JS 都写对了，如果父容器有 overflow: hidden 或祖先用了 transform: translateZ(0)，backdrop-filter 依然失效——它不看变量，只看渲染树里有没有可被模糊的真实背景层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
