为什么CSS变量在border属性里表现异常？

未定义CSS变量导致border简写中color分量invalid，border-width/style可推导，但border-*-color全为空字符串；var()无fallback时不兜底，变量须在:root明确定义。

因为未定义的 CSS 变量会让 border 简写在解析时丢失颜色分量，导致 border-top-color 等展开属性为空字符串，而非 fallback 值或默认值。

border 简写依赖变量可计算性

CSS 引擎解析 border: 1px solid var(--red) 时，必须能算出完整的 color 值，才能展开为 border-top-color、border-right-style 等原子属性。一旦 --red 未在 :root 或继承链中声明，整个 color 分量就视为 invalid，此时：

1. border-width 和 border-style 仍可推导（因字面量存在）
2. border-*-color 全部变成空字符串（border-top-color: ;），不是 currentcolor，也不是 transparent
3. JavaScript 读取 cssRules[0].cssText 会看到大量缺失值，而非降级后的颜色

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

很多人误以为 var(--red, #f00) 能救场，但问题常出在没写 fallback 的地方。注意：

1. var(--red)（无 fallback）→ 变量未定义时，计算值阶段直接 invalid，不触发任何回退
2. var(--red, #f00) → 仅当变量已定义但值非法（如 --red: 123）时才用 fallback；若变量根本不存在，fallback 依然生效
3. 但如果你写的是 border-bottom-color: var(--dao-pure-white)，而 --dao-pure-white 未定义，那这一行本身就会让整个 border 的 color 分量失效

作用域和声明顺序必须严格满足

变量不能“就近定义”，浏览器解析样式规则时不会回溯查找局部作用域中的变量：

1. ❌ 错误：在选择器内部定义 --color，如 .btn { --color: red; border: 1px solid var(--color); } —— border 简写无法读取该变量
2. ✅ 正确：所有被 border 引用的变量必须在 :root 中提前声明，或在父元素上且确保继承链完整
3. ⚠️ 动态插入 <style> 时，:root 定义必须 DOM 顺序在前；用 JS 注入变量需调用 document.documentElement.style.setProperty() 才实时生效

调试时别只信 cssText，要查 computedStyle

cssRules[i].cssText 显示的是解析后的 CSS 文本，受变量是否定义影响极大；而运行时真实渲染靠的是计算值：

1. 用 getComputedStyle(el).borderTopColor 查实际颜色，它会返回最终生效值（如 "rgb(231, 76, 60)" 或 "rgba(0, 0, 0, 0)"）
2. 如果返回 "rgba(0, 0, 0, 0)" 或空字符串，说明变量未定义或拼写错误（--Red ≠ --red）
3. 检查控制台是否有 Invalid property value 警告，特别是针对含 var() 的行

真正卡住人的往往不是语法错，而是变量在 :root 里少写了一个字母，或者构建时 PostCSS 把变量删了却没报错——这时候看 cssText 是空的，但 computedStyle 才告诉你真相。