var()回退值仅在变量未声明或设为unset时生效；空字符串、initial、inherit、非法值均不触发回退，嵌套需避免循环和语法错误，IE11需手动fallback。
var()回退值不生效的典型现象
文字突然变透明、背景消失、字号缩成默认大小，控制台却一片安静——这不是浏览器 bug，而是 var(--x, #000) 的回退根本没触发。最常看到的是：color: var(--text-color, #333) 写了，但元素还是继承了父级颜色或变成 initial；background-color: var(--bg, #fff) 明明写了白色兜底，结果渲染出来是完全透明。
回退只在“未声明”或“unset”时生效
var() 的第二个参数不是“默认值”，它只响应两种状态：
-
getComputedStyle(el).getPropertyValue('--x')返回null→ 真未定义，回退生效 -
--x: unset→ 显式重置，回退生效 -
--x: ""（空字符串）→ 已声明，不回退，属性被丢弃 -
--x: initial或inherit→ 合法值，不回退，按 CSS 继承规则计算 -
--x: bluue（拼错）→ 值非法，但声明存在，部分浏览器会回退，行为不一致，不可依赖
嵌套回退写法错误导致整条声明失效
想用多级降级？var(--a, var(--b, #000)) 是合法的，但下面这些都会让整条 CSS 属性静默失效：
-
var(--a, var(--b))→ 第二个var()缺少回退值，语法错误 -
var(--a, var(--a, #000))→ 循环引用，Chrome 报CSS Parser: cycle detected in variable reference -
var(--a, calc(var(--b) * 2))→ 回退值里不能含var()或未求值表达式，旧 Safari 直接跳过整条声明 -
var(--a, rgba(var(--r), var(--g), var(--b), 1))→ 回退值中var()不解析，整段当作无效值
IE11 和构建工具带来的“假 fallback”陷阱
在 IE11 里，color: var(--text, #333) 这整行会被 parser 直接跳过，连逗号后的 #333 都不看。真正能用的只有：
立即学习“前端免费学习笔记（深入）”；
- 同一规则块内，**静态值写在前，
var()写在后**：color: #333; color: var(--text, #333); - PostCSS
postcss-custom-properties必须设preserve: false，否则生成的是两行（color: #333; color: var(--text);），IE 仍取不到 fallback - 变量必须定义在
:root，且值为静态常量（--size: 12px✅，--size: calc(1rem + 2px)❌） - JS 动态设置后，
el.style.setProperty('--x', '')不会触发回退；得用el.style.removeProperty('--x')或el.style.setProperty('--x', 'unset')
回退机制本身很轻量，真正难的是分清“未声明”和“已声明但为空”——这条线看不见，却决定样式是否崩塌。
