根本原因是暗黑模式下border-width变化而box-sizing仍为content-box，导致布局错位；必须全局或局部设box-sizing:border-box，确保边框增厚不撑开尺寸，hover等状态只改color不改width/style。
暗黑模式下边框影响布局，根本不是“颜色变了所以错位”，而是 border-width 或 border-style 在主题切换时发生了变化，而盒模型没同步响应——尤其当它还卡在默认的 content-box 上。
box-sizing 还是 content-box？检查第一件事
很多项目全局漏了 * { box-sizing: border-box; }，或只对部分组件加了，导致暗黑模式里改了 --border-width: 2px 后，元素总宽瞬间多出 4px。更隐蔽的是：某些 UI 库（如 Chakra、Mantine）在暗色主题下会悄悄把 border-width 从 1px 升到 2px，但没同步调整 box-sizing 或预留空间。
- 用浏览器开发者工具的 “Computed” 面板，直接看目标元素的
box-sizing值，别信 CSS 文件里写了就生效 - 如果用了 CSS 变量控制边框，比如
border: var(--border-width, 1px) solid var(--border-color);，确保变量变更后，box-sizing仍为border-box—— 它不会随变量自动切换 - 老项目若不敢动全局
* { box-sizing: border-box; }，至少给卡片类加局部声明：.card { box-sizing: border-box; }
hover 加边框 + 暗色模式 = 双重跳动
你可能在暗黑模式下给卡片写了 :hover { border-color: #007bff; }，结果悬停时不仅颜色变，位置还抖一下。这不是 bug，是你没预留空间：基础态是 border: 1px solid #444，hover 态变成 border: 2px solid #007bff，宽度凭空 +2px，而 content-box 下这 2px 就往外撑。
- 安全做法：基础态就写
border: 2px solid transparent;，hover 里只改border-color，避免尺寸突变 - 如果必须动态增厚边框（比如强调状态），搭配
box-sizing: border-box+width: calc(100% - 2px)手动扣掉（注意左右边框要一起算） - 别依赖
transition: all掩盖问题——它只是让跳动变慢，不解决根源
box-shadow 替代 border 的真实代价
有人用 box-shadow: 0 0 0 1px #444; 避开边框布局问题，这确实不占尺寸，但在暗黑模式下容易翻车：
-
box-shadow不支持border-radius的精确裁切，圆角卡片边缘可能出现像素级毛边或光晕 - 部分屏幕（尤其 OLED）下，细 shadow 渲染不稳定，暗色背景上可能发灰或消失
- 无障碍工具（如 Windows 高对比度模式）通常忽略
box-shadow，而尊重border，用 shadow 模拟边框等于主动放弃可访问性
真正要稳住暗黑模式下的卡片边框，得同时盯住三件事：盒模型是否统一为 border-box、边框粗细是否在主题间保持一致、以及任何动态修改（hover / focus / disabled）都不能改变 border-width 或 border-style —— 颜色可以变，结构不能晃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
