当 css 中使用 `border: 1px solid var(--red)` 且同时覆盖 `border-bottom-color: var(--dao-pure-white)` 时，若自定义属性未在 `:root` 或有效作用域中声明，浏览器在解析 `cssstylesheet.cssrules` 时会丢失 `border-color`/`border-style`/`border-width` 的展开值，仅保留部分显式设置项。
在现代浏览器（如 Chrome 109、Firefox 108）中，CSSStyleSheet.cssRules 对 border 简写属性的解析依赖于 CSS 自定义属性（CSS Custom Properties）的实际可计算值。关键前提：所有 var(--xxx) 引用的变量必须已在当前样式作用域内被明确定义；否则，浏览器无法推导出 border 的完整长写形式（如 border-top-color, border-right-style 等），从而导致 cssText 输出中出现大量空值（如 border-top-color: ;）。
✅ 正确做法：在 :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);
}此时通过 JavaScript 获取规则：
const styleEl = document.getElementById('style');
const rule = styleEl.sheet.cssRules[0];
console.log(rule.cssText);将输出结构完整、语义清晰的展开结果（Chrome/Firefox 均一致）：
.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;
border-image: initial;
}? 注意：border-image 等衍生属性虽未显式声明，但浏览器会按规范填充默认值（如 initial），而非留空。
⚠️ 常见误区与验证建议
- 变量作用域错误：仅在 .dao-tabs__nav-item--active 内定义 --dao-pure-white（如 & { --dao-pure-white: #fff; }）无法被 border 简写解析器在声明时读取，因其不满足「继承性 + 计算时机」要求；
- 变量名拼写/大小写敏感：--Red ≠ --red，CSS 变量严格区分大小写；
- 动态插入 style 标签需确保顺序：:root 定义必须早于引用它的样式规则（DOM 插入顺序或 加载顺序）；
- 调试技巧：使用 getComputedStyle(el).borderTopColor 验证运行时值是否生效，辅助判断变量是否成功解析。
✅ 总结
border 简写属性中混用 CSS 变量时，CSSStyleSheet.cssRules 的解析行为并非 Bug，而是浏览器对「不可计算简写」的保守处理策略。根本解法始终是——确保所有 var() 引用的自定义属性已在作用域根节点（推荐 :root）中声明并具有有效值。这不仅修复 cssText 输出异常，更是保障样式可维护性与跨浏览器一致性的基础实践。
立即学习“前端免费学习笔记（深入）”；
