根本原因是浏览器默认content-box盒模型导致边框增加额外撑开容器；必须用box-sizing:border-box使宽高包含边框和内边距，避免布局跳动，全局声明* { box-sizing: border-box; }最稳妥。
为什么加border会抖动
根本不是border本身的问题，而是浏览器默认用content-box盒模型：你写width: 200px，再加border: 2px，实际总宽就变成204px。过渡或状态切换时，这个“额外撑开”会瞬间发生，视觉上就是一抽、一跳。
box-sizing: border-box 是底线，不是可选项
必须让width和height包含边框和内边距，否则所有后续修复都是补丁。全局声明最稳：
*, *::before, *::after {
box-sizing: border-box;
}
- 别只给按钮或某几个类加——父容器若还是
content-box，子元素按100%算照样溢出 - IE8+ 全支持，无需前缀
- 第三方库（如Element Plus）可能已设，冲突时宁可局部覆盖，别删掉它再重写
hover 或 active 时仍抖？检查是否偷偷改了别的尺寸
哪怕用了border-box，只要:hover里同时改了padding、margin或font-size，照样触发重排。常见陷阱：
-
button:hover { padding: 10px; border: 2px solid #007bff; }→ 改成只动border-color或transform - 移动端
:active可能不触发，建议统一用.is-activeclass 控制，避免CSS伪类和JS class 切换竞态 - 内部子元素（如
span、svg）默认vertical-align: baseline，哪怕边框稳住，对齐偏移也会造成视觉跳动
需要视觉膨胀效果？用 transform 替代尺寸变更
想让按钮悬停时“变大”，别碰width或padding，直接用transform: scale(1.05)：
- 不触发布局计算，GPU 合成，顺滑且无抖动
- 配合
backface-visibility: hidden防旧版 Safari 渲染失真 - 慎用
will-change: transform，仅限高频动画场景，滥用反而拖慢渲染
真正容易被忽略的，是把border样式写在组件里，却忘了重置所有子元素的vertical-align；盒模型稳了，对齐没管住，抖动照常发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
