统一全站边框需定义--border-color（中性灰）、--border-width（1px）、--border-radius分层变量于:root，分割线须用真实border而非margin模拟，并覆盖伪元素、状态样式及第三方组件的硬编码边框。
直接改一套 --border- 开头的变量就能统一全站边框和分割线，前提是变量定义在 :root、所有用到边框的地方都引用它，且分割线不靠硬编码值“模拟”。
边框变量必须和主题色变量分开命名
很多人把边框颜色写成 var(--primary-color) 或 var(--text-color)，结果换暗色主题时边框跟着变深，糊成一片。这不是设计意图，是语义错配。
-
--border-color应该是中性灰（如#d0d0d0），默认不依赖任何主题色 -
--border-width统一设为1px，避免暗色模式下被误设为2px导致视觉过重 -
--border-radius按用途分层：--radius-sm、--radius-md、--radius-lg，别只用一个泛用变量 - 所有变量必须在
:root中声明，默认值兜底，不能塞进.theme-dark这类 class 里
分割线不能靠 margin/padding “假装”，得真用 border
用 margin-bottom: 1px + 背景色模拟分割线，本质是 hack：它不响应 border-color 变量，无法随主题切换，也不支持 border-style（dashed/dotted）。
- 真实分割线应使用
border-bottom或border-top，并绑定var(--border-color)和var(--border-width) - 如果项目用 Less/Sass，推荐封装
.divider()Mixin，支持方向参数（both、top）和颜色覆盖，编译期可控 - 纯 CSS 场景下，可定义
--divider-color: var(--border-color)作别名，但别另起炉灶——分割线就是边框的一种用法 - 注意
box-sizing: border-box对高度的影响，避免因边框增加导致布局偏移
容易漏改的三类边框场景
改完 :root 变量后仍有部分边框没变，大概率卡在这三处：
- 伪元素里没加
var()：比如.card::after { border-bottom: 1px solid #ccc; }—— 必须改成var(--border-color) - 状态样式遗漏：
:hover、:focus、:disabled下的边框常被写死，例如input:focus { outline: 2px solid #007bff; }，应替换为outline-color: var(--border-color) - 第三方组件库未覆盖：Ant Design、Element Plus 等默认不读你的 CSS 变量，需用高优先级选择器显式重写，如
.ant-btn:focus { border-color: var(--border-color) !important; }
真正统一的难点不在定义变量，而在确保每一处 border、outline、box-shadow（若用于描边）都经过变量接管——漏掉任意一个硬编码值，一致性就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
