CSS变量通过--前缀在:root定义，如--border-width、--border-style、--border-color，配合var()全局复用；响应式与暗色模式应重设变量而非覆盖border值；JS需操作document.documentElement.style.setProperty动态修改。
CSS 自定义属性（CSS 变量）控制边框风格
HTML5 本身不提供变量机制，真正实现“统管边框风格”的是 CSS 中的 --* 自定义属性（即 CSS 变量），配合 border 相关属性使用。它不是 HTML5 的功能，但可在 HTML5 文档中无缝使用，且现代浏览器支持良好（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+）。
如何定义和复用边框变量
把边框的宽度、样式、颜色抽成变量，在 :root 中统一声明，后续所有组件通过 var(--border-width) 等调用，改一处就全局生效。
:root {
--border-width: 1px;
--border-style: solid;
--border-color: #d1d5db;
}
.card, .input, .button {
border: var(--border-width) var(--border-style) var(--border-color);
}
- 变量名必须以
--开头，如--border-radius-sm -
var()函数内不能直接写单位或颜色值，必须是已定义的变量名 - 若变量未定义，
var(--missing)会退回到该 CSS 属性的初始值（如border会变成none） - 可设 fallback 值：
var(--border-color, #9ca3af)
响应式边框风格切换要避免的坑
想在暗色模式或移动端缩窄边框？别直接覆盖整个 border 值，否则会丢失变量语义；应只重设变量本身，保持引用链清晰。
@media (prefers-color-scheme: dark) {
:root {
--border-color: #37414f;
}
}
@media (max-width: 768px) {
:root {
--border-width: 0.5px; / 注意：0.5px 在部分安卓 WebView 不渲染，建议用 1px + transform: scale(0.5) 替代 /
}
}
- 不要写
.card { border: 0.5px solid #37414f; }—— 这样就绕过了变量管控 - 避免在变量中混入单位以外的内容，如
--border: "1px solid #ccc"是非法的，border不接受字符串值 - IE 完全不支持 CSS 变量，如需兼容，得用 PostCSS 插件（如
postcss-custom-properties）编译降级
JavaScript 动态修改边框变量的正确姿势
用 JS 改变主题色或启用/禁用边框时，操作的是 document.documentElement.style，不是元素自身 style —— 因为变量定义在 :root（即 html 元素）上。
立即学习“前端免费学习笔记（深入）”；
document.documentElement.style.setProperty('--border-color', '#ef4444');
document.documentElement.style.setProperty('--border-width', '2px');- 不要对某个
.card元素调用element.style.setProperty，它不会影响其他组件 - 变量值必须是字符串，即使数字也要带单位：
'2px'✅，2❌ - 修改后，所有引用该变量的
border会自动重绘，无需手动触发
实际项目里最容易被忽略的，是变量命名粒度和 fallback 设计——比如把 --border 当成一个完整值来存，看似省事，实则失去宽度/颜色/样式分别调控的能力；还有人在深色模式下只改了 --border-color，却忘了 --border-width 在高 PPI 屏上可能过粗，需要同步微调。
