css变量含逗号时var()会因参数解析错误而失效，可用calc(var(--x))绕过或拆分为多个变量；后备值含逗号同样无效，须用静态声明前置兜底。
var() 里传入带逗号的值会直接失效
CSS 变量本身可以存任何合法 CSS 值，包括 rgba(0, 0, 0, 0.5)、1px solid #000 这类含逗号的字符串。但问题出在 var() 函数解析规则上：它把括号内第一个逗号当作参数分隔符，而不是值的一部分。
比如定义 --shadow: 0 2px 4px rgba(0, 0, 0, 0.2);，再写 box-shadow: var(--shadow); —— 表面看没问题，实际浏览器会把 var(--shadow) 拆成两个参数：--shadow 和 0.2);（因为遇到第一个逗号就切开了），整个函数调用被判为语法错误，整条声明被丢弃。
- 所有含逗号的复合值都踩这个坑：
font-family、background、transform、clip-path等 - 哪怕只多一个空格或换行，只要出现在
var()括号里，也会触发相同行为 - DevTools 不报错，只静默失效；Computed 面板里
box-shadow显示为none
用 calc() 包一层能绕过逗号解析限制
calc() 是唯一被广泛支持的“透传容器”：它不拆解内部值，只是原样转发给属性处理器。把变量套进 calc(var(--x))，就能让逗号保留语义。
实操时注意两点：一是 calc() 必须紧跟在属性名后，不能有空格；二是它只解决解析问题，不改变值合法性 —— 如果变量本身是无效 CSS（比如 --bg: #ff; ），calc() 也救不了。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 正确：
box-shadow: calc(var(--shadow)); - ❌ 错误：
box-shadow: calc( var(--shadow) );（calc 后空格会导致 IE 和部分旧 Safari 失效） - ⚠️ 注意：
calc(var(--x) + 0px)这类加法写法在 Safari 15.4 之前有 bug，建议只用纯包裹
更稳妥的做法：拆分成多个变量
依赖 calc() 终归是权宜之计。真正健壮的方案是把含逗号的值按语义拆开，用多个变量组合拼装。
比如阴影值 0 2px 4px rgba(0, 0, 0, 0.2)，可拆为：
:root {
--shadow-offset-x: 0;
--shadow-offset-y: 2px;
--shadow-blur: 4px;
--shadow-color: rgba(0, 0, 0, 0.2);
}
.box { box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color); }
- 避免所有逗号出现在单个
var()调用中 - 变量命名清晰，方便主题切换时单独覆盖某一部分（比如只改颜色不改模糊度）
- JS 动态修改也更安全：
el.style.setProperty('--shadow-color', 'red')不影响其他维度
不要在 var() 后备值里放逗号值
var(--x, 0 2px 4px rgba(0, 0, 0, 0.2)) 看似能兜底，其实后备值同样受逗号解析规则约束 —— 浏览器仍会把它当多个参数处理，导致整条声明无效。
- 后备值必须是单一、无逗号的合法值：
var(--x, #000)、var(--x, 1px) - 如果非要兜底复合值，只能写成静态声明前置：
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: var(--shadow); - 注意顺序：静态值必须在
var()之前，否则旧浏览器直接跳过整行
rgb()、hsl() 的参数分隔逻辑一致。所以别指望未来会改，老老实实拆变量或套 calc() 才是正解。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
