CSS变量可控制backdrop-filter模糊，但--blur-value必须带单位（如10px），且需同时声明backdrop-filter和-webkit-backdrop-filter，background用rgba()，JS修改后需触发重排。
直接用 --blur-value 变量控制 backdrop-filter: blur() 是可行的，但必须配合显式单位（如 px）和兼容性兜底，否则 Safari 会静默失效、Firefox 旧版本直接忽略。
为什么 CSS 变量不能直接写进 backdrop-filter 值里
因为 backdrop-filter 是一个函数型属性，浏览器解析时要求参数必须是合法的 CSS 函数调用形式。如果只写 backdrop-filter: blur(var(--blur-value))，而 --blur-value 没带单位（比如只设为 10），Chrome 会报解析错误，Safari 则直接跳过整条声明——你什么都看不到，控制台也不会报错。
-
--blur-value必须定义为带单位的值，例如:root { --blur-value: 8px; }，不能是纯数字 - 变量名本身不能含连字符以外的符号，
--blur-px合法，--blur#value非法 - 若通过 JS 动态设置，要用
element.style.setProperty('--blur-value', '12px')，不是'12'
如何安全地在遮罩层上应用变量模糊
关键不是“能不能用”，而是“怎么写才不被浏览器丢弃”。以下结构经真机验证（iOS 16.6+、Chrome 128、Firefox 120）可用：
:root {
--blur-value: 10px;
--overlay-alpha: 0.55;
}
<p>.overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, var(--overlay-alpha));
backdrop-filter: blur(var(--blur-value));
-webkit-backdrop-filter: blur(var(--blur-value)); /<em> Safari 必加 </em>/
z-index: 999;
}- 必须同时写
backdrop-filter和-webkit-backdrop-filter，缺一不可 -
background-color不能用hsla()或transparent替代rgba()，否则部分 Android WebView 模糊失效 - 不要把
var(--blur-value)和固定值混写，例如blur(calc(var(--blur-value) * 1.2))在 Safari 中不支持
JS 动态修改时容易踩的坑
常见错误是改了变量但模糊没变——不是代码没执行，而是浏览器没重绘或变量未生效。
立即学习“前端免费学习笔记（深入）”；
- 修改后需触发重排：对
.overlay元素临时加个transform: translateZ(0)再删掉，强制刷新合成层 - 避免高频更新：连续 16ms 内多次 setProperty 会被节流，建议用
requestAnimationFrame包裹 - 移动端 Safari 对
backdrop-filter的变更响应有延迟，可加will-change: backdrop-filter提前提示，但仅限必要时启用（有内存开销） - 检查 computed style：用
getComputedStyle(el).backdropFilter看返回值是否为blur(10px)，而不是none或空字符串
真正难的不是写对语法，而是让变量变化后，模糊度在所有目标设备上都实时、稳定、无闪烁地响应——这需要同时盯住 CSS 解析规则、浏览器渲染管线行为、以及移动端合成层的隐式限制。
