当 css 中使用未定义的自定义属性（如 `var(--dao-pure-white)`）时，浏览器在通过 `cssstylesheet.cssrules` 读取规则时会降级处理 `border` 简写声明，导致各方向的 `border-*` 展开属性值为空，仅保留显式设置的 `border-bottom-color`。根本原因是 css 变量作用域缺失或未初始化。
在现代浏览器（Chrome 109+、Firefox 108+）中，CSSStyleSheet.cssRules 对 CSS 规则的解析严格遵循 CSS 属性计算与继承规范。当你书写如下样式：
<style id="style">
.dao-tabs__nav-item--active {
border: 1px solid var(--red);
border-bottom-color: var(--dao-pure-white);
}
</style>
若 --red 和 --dao-pure-white 未在任何作用域中定义（例如未在 :root 或父元素上声明），浏览器在解析 border 简写时将无法计算出有效的 color 值。此时，CSS 引擎会将该简写“部分失效”：border-width 和 border-style 仍可推导（因 1px solid 是字面量），但所有 border-*-color（包括 border-top-color、border-right-color 等）均被置为空字符串（""），最终 cssText 输出中表现为：
.dao-tabs__nav-item--active {
border-top-color: ;
border-top-style: ;
border-top-width: ;
/* ... 其他空值 */
border-bottom-color: var(--dao-pure-white);
}
⚠️ 注意：这不是 bug，而是符合 CSS Cascading and Inheritance Level 5 的规范行为——无效的 var() 在计算值阶段被替换为其 fallback（若未提供则为初始值），而 border-color 的初始值是 currentcolor；但当 var(--red) 本身完全未定义且无 fallback 时，整个 border 简写中的 color 分量被视为 invalid at computed-value time，从而导致各方向颜色属性无法可靠展开。
✅ 正确做法是确保所有自定义属性在作用域内明确定义。推荐在 :root 中统一声明全局变量：
:root {
--red: #e74c3c;
--dao-pure-white: #ffffff;
}
.dao-tabs__nav-item--active {
border: 1px solid var(--red);
border-bottom-color: var(--dao-pure-white);
}
此时，document.getElementById('style').sheet.cssRules[0].cssText 将正确输出：
.dao-tabs__nav-item--active {
border-width: 1px;
border-style: solid;
border-top-color: #e74c3c;
border-right-color: #e74c3c;
border-bottom-color: #ffffff;
border-left-color: #e74c3c;
}
? 补充建议：
- 始终为 var() 提供 fallback（如 var(--red, #f00)），增强健壮性；
- 避免在 border 简写中混用变量与字面量（如 border: 1px solid var(--red)），改用分项声明（border-width, border-style, border-color）更利于调试；
- 使用 getComputedStyle(element).borderTopColor 等 API 获取运行时计算值，比依赖 cssRules.cssText 更可靠。
总结：CSS 变量必须先定义、再使用；未定义的 var() 会导致简写属性（尤其是 border、background、font 等复合属性）在 CSSRule 解析中出现不可预测的降级行为。规范化变量声明是保障样式可维护性与 JS 操作一致性的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
