未定义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，此时：
-
border-width和border-style仍可推导（因字面量存在） -
border-*-color全部变成空字符串（border-top-color: ;），不是currentcolor，也不是transparent - JavaScript 读取
cssRules[0].cssText会看到大量缺失值，而非降级后的颜色
var() 没 fallback 时不会“兜底”
很多人误以为 var(--red, #f00) 能救场，但问题常出在没写 fallback 的地方。注意：
-
var(--red)（无 fallback）→ 变量未定义时，计算值阶段直接 invalid，不触发任何回退 -
var(--red, #f00)→ 仅当变量已定义但值非法（如--red: 123）时才用 fallback；若变量根本不存在，fallback 依然生效 - 但如果你写的是
border-bottom-color: var(--dao-pure-white)，而--dao-pure-white未定义，那这一行本身就会让整个border的 color 分量失效
作用域和声明顺序必须严格满足
变量不能“就近定义”，浏览器解析样式规则时不会回溯查找局部作用域中的变量：
- ❌ 错误：在选择器内部定义
--color，如.btn { --color: red; border: 1px solid var(--color); }——border简写无法读取该变量 - ✅ 正确：所有被
border引用的变量必须在:root中提前声明，或在父元素上且确保继承链完整 - ⚠️ 动态插入
<style></style>时，:root定义必须 DOM 顺序在前；用 JS 注入变量需调用document.documentElement.style.setProperty()才实时生效
调试时别只信 cssText，要查 computedStyle
cssRules[i].cssText 显示的是解析后的 CSS 文本，受变量是否定义影响极大；而运行时真实渲染靠的是计算值：
- 用
getComputedStyle(el).borderTopColor查实际颜色，它会返回最终生效值（如"rgb(231, 76, 60)"或"rgba(0, 0, 0, 0)"） - 如果返回
"rgba(0, 0, 0, 0)"或空字符串，说明变量未定义或拼写错误（--Red≠--red） - 检查控制台是否有
Invalid property value警告，特别是针对含var()的行
真正卡住人的往往不是语法错，而是变量在 :root 里少写了一个字母，或者构建时 PostCSS 把变量删了却没报错——这时候看 cssText 是空的，但 computedStyle 才告诉你真相。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
