根本原因是默认content-box盒模型下border额外增加总尺寸，导致hover时宽高突变引发重排；预设transparent边框可预留占位，仅改color不触发重排，配合box-sizing:border-box、统一处理所有交互状态及慎用outline才能彻底稳定布局。
边框导致位移的根本原因：盒模型尺寸突变
按钮加边框后位移，不是浏览器“bug”，而是 border 直接参与盒模型计算的结果。默认 box-sizing 是 content-box，此时 width 和 height 仅指内容区尺寸；一旦 hover 时加 border: 2px solid #007bff，总宽高就额外增加 4px（上下各 2px），容器内其他元素被迫重排。
在 Flexbox 或 Grid 布局中，这种尺寸变化会触发整个子项的重新分配空间，哪怕只动了 1 个按钮，旁边按钮也可能左右微移——人眼对齐敏感，0.5px 都能察觉“抖”。
为什么预设 transparent 边框能稳定布局
关键不在“透明”，而在“宽度占位”。border: 2px solid transparent 和 border: none 在渲染树里是两种完全不同的盒模型状态：
-
border: none→ 浏览器认为 border-width = 0 → 盒子更“瘦” -
border: 2px solid transparent→ border-width = 2px → 占位已预留，hover 时只改border-color，不触发重排
必须显式声明宽度，border-color: transparent 单独写无效——它不改变已有 width，如果原来没设 border，等于什么都没做。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的配套动作
只加 transparent 边框还不够，以下三点漏掉任一，仍可能抖动：
- 确保全局或按钮级启用
box-sizing: border-box，否则padding动态变化也会引发重排 -
:active和:focus-visible状态必须同步处理，否则键盘 Tab 进入时按钮会“缩一下” - 若用伪元素（如
::after添加箭头），避免在:hover中切换display（比如从none切到flex），display 不可动画，强制重排
替代方案：用 outline 绕过边框问题
当边框纯属视觉反馈、无需语义强调时，outline 是更干净的选择：
-
outline不影响盒模型，不会撑开尺寸 - 配合
outline-offset可控距离，例如outline: 2px solid #007bff; outline-offset: 2px; - 需先清掉 UA 默认焦点环：
outline: none，再用:focus-visible单独加 outline，兼顾可访问性
真正难的不是加边框，而是让所有交互状态（hover / active / focus / disabled）的盒模型尺寸全程一致——哪怕多写几行 CSS，也比靠肉眼调 padding 补偿来得可靠。
