未定义的 CSS 变量会导致 border 简写中的 color 分量失效并被判定为 invalid。此时虽然 border-width 和 border-style 仍可被推导出来，但 border-*-color 往往都会显示为空字符串；如果 var() 没有设置 fallback，也不会自动兜底，因此相关变量必须在 :root 中明确定义。

这是因为未定义的 CSS 自定义属性会让 border 简写在解析阶段丢失颜色值，进而使 border-top-color、border-right-color 等展开后的属性变成空字符串，而不是 fallback 值，也不是浏览器默认颜色。

border 简写依赖变量是否可计算

当 CSS 引擎解析 border: 1px solid var(--red) 时，必须先得到一个完整、有效的 color 值，才能继续展开为 border-top-color、border-right-style 等具体原子属性。如果 --red 没有在 :root 或继承链中声明，那么整个 color 分量都会被视为无效，通常会出现以下表现：

• border-width 和 border-style 依然可以保留，因为这两部分有明确字面量
• border-*-color 会全部变成空字符串（例如 border-top-color: ;），既不是 currentcolor，也不是 transparent
• JavaScript 读取 cssRules[0].cssText 时，看到的往往是缺少颜色值的 CSS 文本，而不是自动降级后的颜色结果

var() 没有 fallback 时不会自动“兜底”

很多开发者会把 CSS 变量失效和 fallback 机制混为一谈，实际上问题常常出在没有写 fallback。需要特别注意：

• var(--red)（无 fallback）→ 当变量未定义时，会在计算值阶段直接变成 invalid，不会触发任何默认回退
• var(--red, #f00) → 当变量不存在时，fallback 会生效；当变量已定义但值不合法（例如 --red: 123）时，同样会使用 fallback
• 但如果你写的是 border-bottom-color: var(--dao-pu re-white)，而 --dao-pu re-white 本身没有定义，那么这一条声明就会直接让对应的 border color 分量失效

作用域与声明顺序必须满足要求

CSS 变量的作用域和声明位置非常关键。浏览器在解析样式规则时，不会为了当前属性去“回头”补找一个未及时生效的变量：

• ❌ 错误：在选择器内部定义 --color，如 .btn { --color: red; border: 1px solid var(--color); } —— 在这种场景下，border 简写可能无法按预期读取变量
• ✅ 正确：所有被 border 引用的 CSS 变量，最好都提前在 :root 中声明，或者定义在父元素上并保证继承链完整可用
• ⚠️ 动态插入