直接改CSS变量无反应，因浏览器对backdrop-filter的变量插值支持不一且易被高优先级硬编码规则覆盖；应使用@layer声明样式层并配合-webkit-backdrop-filter确保生效。
直接用 CSS 变量控制 backdrop-filter: blur() 的数值是可行的，但必须配合 @layer 或明确的层叠顺序来避免被覆盖；否则改了变量值，样式根本不会更新。
为什么直接改 CSS 变量没反应
很多人写成这样：
.glass {
--blur-radius: 12px;
backdrop-filter: blur(var(--blur-radius));
}
看起来没问题，但实际运行时发现：哪怕 JS 改了 --blur-radius，模糊强度也不变。原因有二：
-
backdrop-filter不是所有浏览器都支持变量插值（尤其是旧版 Safari 和部分安卓 WebView） - 更常见的是：你定义变量的位置在样式表靠后，而另一个无变量、硬编码
blur(8px)的规则优先级更高，直接盖掉了它
解决办法不是加 !important，而是用 @layer 显式声明控制层。
立即学习“前端免费学习笔记（深入）”；
用 @layer + CSS 变量安全实现动态模糊
现代浏览器（Chrome 110+、Firefox 119+、Safari 17.4+）已支持 @layer，它是管理样式优先级的正解。把毛玻璃规则放进独立 layer，就能确保变量修改后立即生效：
@layer glass {
.glass {
--blur-radius: 12px;
--saturation: 180%;
backdrop-filter: blur(var(--blur-radius)) saturate(var(--saturation));
-webkit-backdrop-filter: blur(var(--blur-radius)) saturate(var(--saturation));
background-color: rgba(255, 255, 255, 0.12);
}
}
之后 JS 只需改元素上的变量：
el.style.setProperty('--blur-radius', '20px');
注意三点：
- 必须同时设置
-webkit-backdrop-filter，Safari 16.4 之前不认标准属性 -
@layer声明要放在所有相关规则之前，否则 layer 内部规则可能被外部同名类覆盖 - 不要在 :hover 里重复定义整个
backdrop-filter，只改变量值即可，减少重绘开销
鼠标悬停/焦点触发时的性能陷阱
用 :hover 或 :focus-within 动态调高模糊值很常见，但容易引发卡顿：
- 模糊半径超过
24px时，在中低端 Android 设备上帧率明显下降 - 多个
.glass元素同时 hover，会触发批量重绘，尤其当它们叠加在视频或 canvas 上方时 -
saturate()和brightness()虽然视觉增强明显，但每多加一个 filter 函数，GPU 负担就线性增加
推荐做法：
- 默认设为
--blur-radius: 8px，hover 时只升到16px，别拉满 - 对非关键区域（如页脚提示）禁用 hover 动态，保持静态
blur(6px) - 用
will-change: backdrop-filter提前告知浏览器该元素将变化，但仅限真正需要动画的少数元素
降级方案：当 backdrop-filter 不可用时怎么保效果
不是所有环境都能用 backdrop-filter。比如企业内网 IE11、某些微信内置浏览器、或强制禁用硬件加速的场景。此时不能只留白，得有 fallback：
- 检测支持性：
if ('backdropFilter' in document.documentElement.style)，不支持就加 class.glass--fallback - fallback 样式里用
background: rgba(255, 255, 255, 0.2)+ 柔和box-shadow模拟层次感，别写死opacity，否则文字也变淡 - 如果背景是图片，可预生成一张高斯模糊后的同尺寸图，用
background-image替代动态模糊（适合静态 Banner 区域）
变量本身可以照常定义，只是 fallback 层不读取它——这点容易被忽略：CSS 变量作用域是全局的，但 fallback 规则里若没显式引用，变量改了也没意义。
