支持，但需初始态和悬停态的 border-width 均使用带单位的数值（如 2px→6px），且保持 border-style 和 border-color 不变；若失效，可改用 outline-width 或 box-shadow 模拟。
border-width 支持 transition 吗？
支持，但有前提：必须是可动画的数值类型（如 px、em、rem），不能是 thin、medium、thick 这类关键字。浏览器无法插值计算“thin → medium”，所以过渡会直接跳变。
怎么写 border-width 的 transition 才生效？
关键在两点：显式声明过渡属性 + 初始/目标状态都用具体数值单位。常见写法如下：
- 过渡声明要包含
border-width，不能只写all（部分浏览器对all处理不一致） - 初始状态（比如
border: 2px solid #000）和悬停/激活状态（比如border: 6px solid #000）的宽度必须都是带单位的数字 - 避免混用简写
border和单独border-width，容易触发重置行为导致过渡中断
button {
border: 2px solid #333;
transition: border-width 0.3s ease;
}
button:hover {
border-width: 6px;
}
为什么加了 transition 还是不平滑？
最常见原因有三个：
-
border-style或border-color在过渡中发生变化，导致浏览器放弃优化，降级为重绘（尤其是 Safari） - 使用了
border: none→border: 2px solid red这类“无→有”切换，部分浏览器不触发border-width过渡（应改用border-width: 0→border-width: 2px） - 父容器或自身触发了 layout 触发器（如
display: inline变成block），打断过渡链
稳妥做法是：只动 border-width，其他 border-style 和 border-color 保持不变，且始终声明 border-style（哪怕和默认值一样）。
立即学习“前端免费学习笔记（深入）”；
有没有更稳定的替代方案？
如果遇到兼容性问题或需要更高可控性，可以用 outline 或 box-shadow 模拟边框增长效果：
-
outline支持outline-width过渡，且不影响布局流，但不支持圆角跟随 -
box-shadow（如box-shadow: 0 0 0 2px #000）过渡更稳定，还能配合border-radius，但属于投影层，层级和点击区域需额外注意
a {
border: 2px solid #007bff;
transition: border-width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover {
border-width: 4px;
}
真正卡住的地方往往不是语法，而是初始态没设好单位，或者 hover 里漏写了 border-style —— 浏览器看到样式不完整，就干脆不启动过渡。
