var()的第二个参数是回退值，仅在变量完全未声明或值为非法css值（如语法错误、未定义变量引用）时生效；若已声明为空字符串、inherit、initial或合法无效值（如transparent），则不触发回退。
var() 的第二个参数不是“默认值”，而是“回退值”
很多人误以为 var(--color, red) 中的 red 是变量未定义时的“默认值”，其实它只是 CSS 属性值解析失败时的**回退值**——它不会改变自定义属性本身的定义，也不会触发任何计算或继承修正。只有当 --color 根本不存在（或语法错误导致无法解析），且该 var() 被用在支持该回退机制的属性中时，red 才会生效。
常见误解场景：--color: ;（空值）、--color: inherit、--color: var(--missing) 且 --missing 未定义——这些情况下，var(--color, red) 仍会尝试解析 --color，而由于其值无效，最终整个声明会被浏览器忽略（不应用），此时回退值才起作用。
什么时候回退值真正生效？看这几种典型情况
回退值只在以下明确条件下被采用：
-
--color在当前作用域完全未声明（包括 :root 和所有祖先元素） -
--color声明值为非法 CSS 值，例如--color: 123;（数字不能直接作为颜色）、--color: url(;（语法不完整） -
--color引用了另一个未定义的变量，如--color: var(--theme-bg);且--theme-bg不存在 - 该
var()出现在支持回退的属性中（绝大多数标准属性都支持，但部分实验性属性或旧版浏览器可能不支持）
反例：如果 --color: transparent; 是合法值，哪怕你本意是“没设颜色”，var(--color, red) 也会用 transparent，不会回退到 red。
嵌套 var() 回退不递归，别指望链式兜底
var(--a, var(--b, blue)) 看似能“二级回退”，但实际行为受限于解析顺序：外层 var() 的回退值必须是**可直接使用的 CSS 值或另一组合法 var() 调用**；但若 --a 存在却非法，浏览器会先尝试解析 var(--b, blue) 这个回退值本身——而它又依赖 --b 是否存在/合法。
更稳妥的做法是分层控制：
body {
--primary: var(--brand-color, #007bff);
}
button {
background-color: var(--primary, #007bff); /* 二次兜底，防 --primary 解析失败 */
}
注意：不要写成 background-color: var(--brand-color, var(--fallback, #007bff)); ——这种嵌套在多数浏览器中虽能工作，但可读性差，且一旦 --fallback 也出问题，就彻底无解。
兼容性与性能提醒：别在关键路径滥用回退
所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 16+）都支持 var() 回退，但 IE 完全不支持 var()，需另配预处理器或 JS 注入方案。
性能上，回退本身开销极小，但频繁使用深层嵌套或跨作用域引用（比如在大量伪元素里反复 var(--theme, var(--base, black))）可能轻微拖慢样式计算——尤其在低端移动设备上。
真正容易被忽略的是：回退值**不参与 CSS 自定义属性的级联和继承逻辑**。它只是个字面量备用值，不会像真实变量那样响应父元素变更。如果你依赖动态主题切换，确保主变量（如 --theme-color）在正确作用域被更新，而不是靠回退值“假装”有响应能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
