核心解法是始终用transparent占位border避免重排：默认设border:2px solid transparent，hover仅改color；border-radius动画改用scale模拟；ie11禁用border动画改用box-shadow；伪元素边框须绝对定位+transform控制。
border-width切换引发重排，必须用transparent占位
直接写 border: 2px solid #007bff → border: 0 这类切换，浏览器会重新计算盒模型尺寸，导致元素“一抽一抽”跳动。这不是动画不顺，是布局被强制重排了。
核心解法是让 border 始终存在、只变颜色和粗细视觉表现：
- 默认状态就设
border: 2px solid transparent，占满空间 - :hover 中只改
border-color: #007bff，不碰border-width或border-style - 如果需要粗细变化（比如 2px → 4px），也得用 transparent 占位：默认
border: 4px solid transparent，hover 时再改 color
border-radius动画抖动？确保transform-origin对齐中心
给 border-radius 加 transition 看似合理，但实际会触发重排——因为圆角变化影响渲染边界，尤其在 Safari 和旧版 Chrome 中容易卡顿或偏移。
更稳的替代方案是用 transform: scale() 模拟圆角“膨胀感”，配合固定原点：
- 把
border-radius固定写死（如border-radius: 4px），别让它参与 transition - hover 时加
transform: scale(1.02)+transform-origin: center center - 避免用
scaleX或scaleY单向缩放，否则可能拉伸内容造成错位
IE11下border hover跳帧？禁用所有非transform/opacity属性
IE11 渲染引擎对 border 相关变更极度敏感：border-color 切换都可能卡顿，更别说 border-width 或 border-style。它只对 transform 和 opacity 做硬件加速。
实操限制很明确：
- IE11 中彻底放弃 border 动画，改用
box-shadow: 0 0 0 2px #007bff模拟边框，hover 时只调opacity - 必须提前声明
box-shadow: 0 0 0 2px transparent占位，否则阴影出现仍会重排 - 过渡时间别低于
0.2s，transition: opacity 0.2s ease比0.1s稳定得多
伪元素边框抖动？绝对定位 + transform 是唯一通解
像 .btn::after { border: 2px solid #007bff; } 这种写法，在 hover 中开关边框，只要没脱离文档流，就一定会跳。因为伪元素默认参与布局计算。
稳定写法只有一条路：
- 父元素加
position: relative - 伪元素设
position: absolute（基础态就写，别只塞在 :hover 里） - 用
transform: scaleX(0)/scaleX(1)控制“显示”，而不是border开关 - 起始态必须设
transform-origin: left center（横向展开）或top center（纵向展开），不然缩放中心偏移会视觉跳动
真正难的不是怎么让边框动起来，而是怎么让它的存在感从头到尾不干扰布局流——border 属性天生带重排风险，能不用就不用，能用 transform 模拟就别硬切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
