backdrop-filter 中 var() 必须套 calc() 才能生效，如 blur(calc(var(--blur) * 1px))，且 --blur 值须为纯数字；需配合 @layer 控制层叠、兼顾深色模式与移动端降级、避免多元素 hover 性能崩塌。
backdrop-filter 里不能直接用 var()，必须套 calc()
浏览器解析 backdrop-filter: blur(var(--blur)) 时会静默丢弃整条声明，DevTools 里能看到它被划掉或标红为 “invalid value”。这不是兼容性问题，而是 CSS 函数语法限制：blur() 要求参数是可计算的长度值（<length></length>），而未求值的 var(--blur) 属于 <custom-ident></custom-ident> 类型，无法自动转换。
正确写法是用 calc() 补单位：backdrop-filter: blur(calc(var(--blur) * 1px))，前提是 --blur 的值是纯数字（如 8），不是带单位的字符串（如 "8px"）。
-
:root { --blur: 8; }✅ —— 后续可安全用于calc(var(--blur) * 1px) -
:root { --blur: 8px; }❌ ——calc(8px * 1px)是非法运算，报错 - 别在 JS 里设
el.style.setProperty('--blur', '12px')，应设'12'
@layer 是变量更新生效的前提，否则改了也白改
很多人 JS 改了变量，模糊强度却没变，真正卡点往往不是语法，而是样式层叠优先级：另一个硬编码的 backdrop-filter: blur(6px) 规则可能盖掉了你的变量版本。
用 @layer 显式声明控制层，能确保变量修改后立即触发重绘：
@layer glass {
.glass {
--blur: 8;
backdrop-filter: blur(calc(var(--blur) * 1px));
-webkit-backdrop-filter: blur(calc(var(--blur) * 1px));
}
}
-
@layer必须放在所有相关规则之前，否则 layer 内部规则可能被外部同名类覆盖 - 务必同时写
-webkit-backdrop-filter，Safari 16.4 之前不认标准属性 - hover 时只改变量：
.glass:hover { --blur: 12; }，不要重复写整条backdrop-filter
深色模式和移动端要主动调低模糊值
同一模糊半径在深色背景下容易“糊不开”，在小屏上则加剧文字边缘发虚。这不是视觉错觉，是渲染采样与对比度共同作用的结果。
用媒体查询微调变量值，比覆盖整个规则更稳妥：
-
@media (prefers-color-scheme: dark) { :root { --blur: 6; } }—— 避免细节全融掉 -
@media (prefers-reduced-motion: reduce) { :root { --blur: 0; } }—— 但设为0仍触发合成层，更优解是用 class 移除声明 - 移动端建议上限
--blur: 10，超过后非 Retina 屏文字明显失焦
多个玻璃元素同时 hover 容易卡顿，别只盯着单个值
模糊半径每增加 4px，GPU 负担线性上升；当多个 .glass 元素叠加在视频或 canvas 上方并同时 hover，中低端 Android 设备帧率会明显下跌。
- 慎用
saturate()或brightness()—— 每多一个 filter 函数，GPU 开销就加一档 - 避免在
:hover里把--blur拉到24以上，实测超过该阈值后性能断崖下降 - 变量更新 ≠ 滤镜重绘完成：CSS 变量变了，但浏览器未必立刻重采样背景，尤其在滚动或动画中
实际最难的部分不是写出 blur(calc(var(--blur) * 1px))，而是判断什么时候该降级、什么时候该收束模糊强度——这得看背后内容复杂度、设备能力、以及用户是否真的需要那一丝“呼吸感”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
