根本原因是未设置box-sizing时浏览器默认content-box导致边框增加额外撑开容器；必须用box-sizing:border-box使宽高包含边框，避免布局跳动。
边框宽度变化时元素尺寸跳动的根本原因
给元素加 border 时，如果没设 box-sizing，浏览器默认用 content-box 模式：边框会额外撑开容器，导致宽高突变。过渡过程中边框从 0px 变到 2px，实际内容区被压缩，视觉上就“抖”了。
必须设置 box-sizing: border-box
这是最直接有效的解法。它让 width 和 height 包含边框和内边距，边框增减不再影响布局流。
button {
width: 120px;
padding: 8px;
border: 0;
box-sizing: border-box; /* 关键 */
transition: border 0.3s ease;
}
<p>button:hover {
border: 2px solid #007bff;
}- 所有涉及边框过渡的元素都应统一加
box-sizing: border-box - 建议在重置样式（如
* { box-sizing: border-box; }）里全局声明，避免遗漏 - 注意：IE8+ 支持该属性，无需前缀
过渡时仍抖动？检查是否漏了 padding 或 margin
即使用了 border-box，如果 hover 状态还同时改了 padding 或 margin，依然会触发重排。常见于按钮伪类或框架默认样式。
- 用浏览器开发者工具的「Computed」面板，对比正常态和 hover 态的
border、padding、margin值是否一致 - 避免写
button:hover { padding: 10px; border: 1px solid; }这类组合变更 - 若需视觉膨胀效果，优先用
transform: scale()替代尺寸类属性变更
动画卡顿或边缘模糊？考虑硬件加速与像素对齐
边框过渡本身不触发 GPU 加速，但高频重绘可能在低端设备上表现为“卡”而非“抖”。另外，非整数边框宽度（如 1.5px）在缩放或 subpixel 渲染下易发虚。
立即学习“前端免费学习笔记（深入）”；
- 过渡属性只写
border-color或border-width单项，比全写border更可控 - 确保边框宽度为整数：
border-width: 2px，避免1.8px或百分比值 - 如需更顺滑，可加
will-change: border-color提前提醒渲染引擎（慎用，仅限必要场景）
边框过渡抖动看似小问题，但根源常藏在盒模型理解偏差或样式叠加干扰里；box-sizing: border-box 是底线，而真正稳住的，是每次改样式前多看一眼 computed 值。
