<p>backdrop-filter 中 var() 必须套 calc() 才生效，因 blur() 仅接受 <length> 类型参数；正确写法为 backdrop-filter: blur(calc(var(--blur-radius) * 1px))，且需配合 @layer、-webkit-backdrop-filter 和 @supports 降级，并按组件作用域定义变量。</p>
backdrop-filter + var() 必须套 calc() 才能生效
直接写 backdrop-filter: blur(var(--blur-radius)) 在所有浏览器里都会静默失效，DevTools 中该行样式被标灰，控制台无报错。这不是兼容性问题，而是 CSS 语法限制：blur() 只接受 <length></length> 类型参数，而未求值的 var(--blur-radius) 是 <custom-ident></custom-ident>，无法自动转换。
正确写法是用 calc() 补单位：
-
--blur-radius必须定义为纯数字（如8），不能带单位（8px是错的） - 使用
backdrop-filter: blur(calc(var(--blur-radius) * 1px)) - 必须同时写
-webkit-backdrop-filter，Safari 16.4 之前不认标准属性
@layer 是变量更新生效的前提
JS 调用 element.style.setProperty('--blur-radius', '12') 后模糊没变，大概率不是代码错了，而是样式被更高优先级规则压住了。比如另一个硬编码的 backdrop-filter: blur(6px) 规则在层叠顺序上赢了你的变量版本。
解决方法是显式声明样式层级：
立即学习“前端免费学习笔记（深入）”；
-
@layer必须放在所有相关规则之前，否则内部规则可能被外部同名类覆盖 - 推荐写法：
@layer glass { .glass { --blur-radius: 8; backdrop-filter: blur(calc(var(--blur-radius) * 1px)); } } - hover 时只改变量：
.glass:hover { --blur-radius: 12; }，不要重复写整条backdrop-filter
降级方案不能省，尤其要防安卓 WebView 静默忽略
Chrome 115+、Safari 17.4+、Firefox 119+ 支持 calc(var() * 1px)，但 Edge 113 及更早、多数安卓 WebView 仍会整条忽略 backdrop-filter 声明——不报错也不渲染。
必须提供视觉 fallback：
- 先设一个半透明背景：
background: rgba(255, 255, 255, 0.15) - 再用
@supports (backdrop-filter: blur(1px))包裹增强逻辑 - 别把
--blur-radius定义在:root下全局滥用，按组件作用域定义更安全，例如.modal-overlay { --blur-radius: 8; }
动态范围要适配场景，不是越大越好
同一模糊值在不同上下文表现差异很大：深色背景下 8px 可能糊不开，小屏上 10px 会让文字边缘发虚，Mac Safari 对 12px+ 还可能出现边缘光晕。
建议策略：
- 基础范围控制在
2px～10px（对应变量值2～10） - 配合系统偏好做响应：
@media (prefers-reduced-motion: reduce)下强制设为0 - 移动端可结合
@media (max-width: 768px)主动调低，比如设为4 - JS 更新变量时加节流，避免滚动中高频触发重绘
真正卡点不在语法本身，而在层叠优先级和降级路径是否真实生效。很多“变量改了但没反应”的问题，查到最后都是 @layer 没前置，或 @supports 块里漏了 -webkit- 前缀。
