根本原因是边框改变盒模型尺寸触发重排；预设透明边框、保持border-width一致、避免display突变、移动端降级为:active或touchstart处理可解决。
hover加边框为什么会让其他元素跳动
根本原因是边框改变了元素的盒模型尺寸，触发浏览器重排（reflow）。比如按钮默认没有边框，border: 2px solid #007bff一加上，宽高各增加4px，Flex容器里兄弟元素就会被挤动位置。这不是动画不顺，是布局本身在“呼吸”。
预设透明边框是最轻量的解法
让元素从一开始就有边框占位，hover时只改颜色或样式，尺寸完全不变：
- 基础样式里写
border: 2px solid transparent，不是border: none - hover 时只改
border-color或border-style，避免任何 width / style / color 的组合突变 - 如果要用虚线/双线等不同样式，确保所有状态下的
border-width一致
flex 容器里尤其要防 display 突变
常见错误是默认用 display: inline-block，hover 时切到 display: flex——这会彻底重算子元素对齐和基线，伪元素（如 ::after）极易下跳。正确做法：
- 按钮默认就设
display: flex+align-items: center+justify-content: center - hover 只调背景、文字色、transform，不动 display / float / position
- 伪元素若参与布局，必须提前加
position: absolute并配top/left，不能靠文档流撑开空间
移动端 hover 边框要降级处理
iOS Safari 和部分安卓浏览器根本不响应 :hover，强行加边框可能白忙一场。更稳妥的做法：
立即学习“前端免费学习笔记（深入）”；
- 用
:active替代 hover 做点击反馈，比如button:active { border-color: #0056b3; } - 配合
touchstart事件临时加类（如.is-pressed），再用 CSS 控制边框 - 别依赖 hover 边框做关键交互提示，优先用 background / icon / transform 等不影响布局的方式
真正难的不是写对一行 border，而是判断这个边框是否真的需要改变尺寸——大多数时候，它只需要换颜色就够了。
