var(--foo) 的 fallback 未定义时，浏览器按层叠规则回退到属性的 initial 值，而非重置或继承；这是 CSS 无效值处理机制，与 var() 本身无关。
var(--foo) 的 fallback 值未定义时，浏览器不会“重置为初始状态”——它只是按 CSS 层叠规则继续向上查找，最终落到该属性本身的 initial 值。这不是自定义属性的主动行为，而是普通 CSS 属性在值无效时的兜底机制。
为什么 var(--missing) 会让属性表现得像 initial？
因为当自定义属性未定义（或为空字符串、非法值），var(--missing) 计算结果是 invalid at computed-value time，整个声明被丢弃，该属性退回到层叠流程中的下一个有效来源：通常是继承值（如果可继承）或规范定义的 initial 值。
例如：
div {
color: var(--text-color, red); /* 有 fallback，始终生效 */
}
span {
color: var(--text-color); /* --text-color 未定义 → color 声明失效 → 回退到父级 color 或 initial（black） */
}-
color是可继承属性，若父元素没设color，则最终取规范initial值canvastext（通常渲染为黑色） -
margin不可继承，margin: var(--gap)失效后直接回退到margin的initial值0，不是继承也不是浏览器 UA 样式 - 这个过程和你写
color: nonsense-value;效果一致——CSS 引擎不报错，但跳过该声明
var() 的 fallback 不是“默认值”，而是“备用字面量”
var(--x, 12px) 中的 12px 是一个普通 CSS 值，它不参与继承判断、不触发重置逻辑，只在 --x 缺失/无效时原样代入。它甚至可以是另一个 var()：
立即学习“前端免费学习笔记（深入）”；
p {
font-size: var(--fs, var(--base-size, 16px));
}- fallback 本身也支持嵌套
var()，但一旦所有 fallback 都无效，最终仍会退到该属性的initial - fallback 不能是
inherit、initial、unset等关键字（语法错误），也不能含calc()外部的运算符 - 空格、注释、逗号分隔符在 fallback 中会被保留，但无效值（如
12px 14px用于单值属性）仍导致整个声明失效
容易踩的坑：把 UA 样式、继承值、initial 混为一谈
开发者常误以为 var(--x) “没值”就等于“恢复浏览器默认”，其实完全不是一回事：
- 浏览器默认样式（User Agent stylesheet）是独立于 CSS 规范的实现层规则，比如
button的border: 2px outset，而border属性的initial值是medium none currentColor -
initial是 W3C 定义的每个属性固定值，与浏览器无关；MDN 上查 “Initial value” 列才是它 - DevTools 的 “Computed” 面板里显示的值，往往是 UA 样式 + 继承 + 层叠后的结果，不是
initial - 想真正剥离 UA 样式，得用
appearance: none（表单控件）或显式覆盖，而不是依赖var()失效
关键点在于：var() 只是一个值替换机制，它本身不带重置语义；所谓“变回初始状态”，其实是 CSS 引擎在值无效后执行的标准兜底流程——而这套流程对每个属性是确定且固定的，和你是否用了自定义属性无关。
