border-width不支持transition动画，因其属离散型属性；需用border-color透明度变化、outline、box-shadow或伪元素模拟平滑效果。
border-width 支持 transition，但必须满足三个硬性条件，否则直接跳变。
为什么写了 transition: border-width 却没动画？
最常见原因是浏览器无法插值计算——比如起始态用 border: none 或 border: thin solid #000，目标态是 border-width: 4px。none 和 thin 都不是可动画数值，浏览器只能重绘，不触发过渡。
- 起始态必须写成带单位的明确宽度，如
border: 2px solid #000（不能省略solid） - 悬停态只改
border-width，不要动border-style或border-color，哪怕它们没变也要显式保持一致 - 避免混用简写
border和单独属性：比如起始用border: 2px solid red，悬停却只写border-width: 4px，会导致部分浏览器重置整个边框声明
怎么写才真正生效？
关键在「显式 + 数值 + 稳定」。下面这段是经过 Safari、Chrome、Firefox 验证的最小可行写法：
button {
border: 2px solid #333;
transition: border-width 0.3s ease;
}
button:hover {
border-width: 6px;
}
注意：transition 必须写在常态选择器里，不能只写在 :hover 中；border-style 和 border-color 在两个状态中完全一致；border-width 的值始终是带单位的数字（px、em 都行，thin 不行）。
立即学习“前端免费学习笔记（深入）”；
遇到兼容问题或布局抖动怎么办？
如果元素本身没有固定尺寸，border-width 变化会引发 layout shift（尤其表格单元格、内联元素），这时别硬刚 border-width：
- 用
border: 2px solid transparent占位，hover 时只变border-color，宽度不变 - 改用
outline-width：它支持 transition 且不影响布局流，但不跟随border-radius - 用
box-shadow: 0 0 0 2px #000模拟边框，过渡box-shadow更稳定，还能圆角，但点击区域和层级需额外确认
真正卡住的时候，往往不是 transition 写错了，而是初始边框没“立住”——只要 border-style 缺失、border-width 是关键字、或者从 none 切换过来，动画就废了。这点容易被忽略，但改完立刻见效。
