backdrop-filter: blur(var(--blur)) 不生效是因为 CSS 要求 blur() 参数为可计算长度值，而未运算的 var(--blur) 属于 类型，无法自动转为像素单位，必须用 calc(var(--blur) * 1px) 显式转换。
必须用 calc() 包裹 var()，且变量值只能是纯数字，否则整条 backdrop-filter 声明会被浏览器静默丢弃。
为什么 backdrop-filter: blur(var(--blur)) 不生效
这不是兼容性问题，而是 CSS 语法限制：blur() 要求参数是可计算的长度值（<length></length>），而未求值的 var(--blur) 属于 <custom-ident></custom-ident> 类型，无法自动转为像素单位。DevTools 中该声明会直接标红或划掉，提示 “invalid value”。
正确写法必须显式参与计算：
-
backdrop-filter: blur(calc(var(--blur) * 1px))✅ ——--blur值为8、12这类纯数字 -
backdrop-filter: blur(var(--blur))❌ —— 静默失效 -
backdrop-filter: blur(calc(var(--blur)))❌ —— 缺少单位参与运算，非法 -
el.style.setProperty('--blur', '12px')❌ —— JS 设置带单位字符串，calc(12px * 1px)是非法表达式
变量更新后模糊没变？先查 @layer 和层叠优先级
很多人 JS 改了 --blur，但视觉无变化，真正卡点常在样式层叠：一个硬编码的 backdrop-filter: blur(6px) 规则可能覆盖了你的变量版本。
立即学习“前端免费学习笔记（深入）”；
解决方案是用 @layer 显式控制作用域：
@layer glass { .glass { --blur: 8; backdrop-filter: blur(calc(var(--blur) * 1px)); } }-
@layer必须放在所有相关规则之前，否则 layer 内部规则仍可能被外部同名类覆盖 - 务必同时写
-webkit-backdrop-filter，Safari 16.4 之前不认标准属性
hover 动态调模糊时别重复写整条声明
只改变量值，不要重写整个 backdrop-filter：
-
.glass:hover { --blur: 12; }✅ —— 利用级联自动触发重绘 -
.glass:hover { backdrop-filter: blur(calc(var(--blur) * 1px)); }❌ —— 多余，且若变量未定义会出错 - 移动端建议
--blur上限设为10，非 Retina 屏文字明显失焦 - 深色模式下主动降值：
@media (prefers-color-scheme: dark) { :root { --blur: 6; } }，避免细节全融掉
多个玻璃元素 hover 同时触发时 GPU 负担线性上升
模糊半径每增加 4px，GPU 渲染压力就显著升高；多个 .glass 元素一起 hover，容易卡顿甚至掉帧。
这不是单个值的问题，而是合成层叠加效应：
- 避免在列表项或网格项上无节制使用 hover 模糊
- 考虑用
@media (prefers-reduced-motion: reduce)主动禁用：:root { --blur: 0; }，但更优解是加 class 移除整个声明 - 性能敏感场景下，优先用
transition: backdrop-filter 0.2s控制变化节奏，而非靠 JS 频繁 setProperty
最易忽略的一点：即使你语法全对、@layer 也写了，只要父容器用了 transform 或 will-change 创建了新层叠上下文，backdrop-filter 就可能只模糊该上下文内的内容——它模糊的是“背后”，但这个“背后”的范围，由层叠上下文边界决定。
