:border-width动画才是边框缩放的正确实现方式，需配合box-sizing:border-box防止布局跳动；伪元素方案可实现向外扩散效果，而transform:scale()仅缩放元素整体且影响交互。
button:hover 时 border 缩放动画不生效？
直接对 border 设置 transform: scale() 不会缩放边框本身，而是缩放整个元素（含内容），视觉上容易误判为“边框没动”。真正想让边框“向外扩张”或“向内收缩”，得靠 border-width 动画 + box-sizing: border-box 保障尺寸稳定。
- 必须给按钮设
box-sizing: border-box，否则border-width增大会撑开容器，导致布局跳动 - 避免用
transform: scale()模拟边框缩放——它不改变实际边框宽度，响应点击区域、无障碍焦点环都会出错 - 动画属性优先用
border-width，而非transform，语义准确且兼容性好（IE10+）
用 transition 实现平滑的边框粗细变化
核心是监听 :hover 状态下 border-width 的变化。注意初始值不能为 0（否则动画会丢失起点），推荐从 1px 或 2px 起始。
button {
border: 2px solid #007bff;
box-sizing: border-box;
transition: border-width 0.3s ease;
}
button:hover {
border-width: 4px;
}
- 如果希望“只加粗某一边”，改用
border-top-width等单侧属性，但需确保其他三边初始值一致，否则 hover 时可能产生不对称抖动 - 不要在
transition中写all，容易意外触发文字重排或背景渐变等无关动画 - 移动端需补
outline: none防止点击后出现双轮廓（尤其 Safari）
要“边框向外扩散”效果？用伪元素模拟更可靠
纯 CSS 实现“边框从中心向外生长”的缩放感，border-width 动画做不到（它是均匀加粗）。这时用 ::before 伪元素 + transform: scale() 是更可控的方式。
button {
position: relative;
border: 2px solid transparent;
}
button::before {
content: '';
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
border: 2px solid #007bff;
transform: scale(0.85);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
button:hover::before {
transform: scale(1);
opacity: 1;
}
- 伪元素的
top/left/right/bottom偏移量必须等于初始border-width，否则会出现错位或裁剪 -
scale(0.85)是为了预留缩放空间，避免 hover 时伪元素超出按钮边界造成溢出隐藏问题 - 务必设
opacity配合，否则未 hover 时伪元素仍占渲染层，可能遮挡下方内容或影响点击穿透
Firefox 下 border 动画卡顿？检查是否触发了重排
Firefox 对 border-width 变化较敏感，若按钮父容器宽高未固定、或存在 flex/grid 自适应行为，动画过程中可能频繁触发 layout，导致掉帧。
立即学习“前端免费学习笔记（深入）”；
- 给按钮设明确的
width和height（或min-width/min-height），切断尺寸依赖链 - 避免在动画中同时修改
padding或font-size，这些属性会强制重排，比border-width更伤性能 - 如需极致流畅，可加
will-change: border-width提前告知浏览器优化，但仅限 hover 触发频繁的按钮，别滥用
border 更稳，也更容易和阴影、渐变等其他效果叠加。 
