border-width 不支持 CSS 过渡，会导致边框“跳变”；应改用 box-shadow、outline 或 JavaScript 实现平滑效果。
transition 不能直接作用于 border-width
直接写 transition: border-width 0.3s 是无效的——CSS 规范中，border-width 属于「不支持过渡的属性」（non-animatable），浏览器会忽略它。你看到边框“跳变”而非平滑变化，根本原因就在这儿。
常见错误现象：
• 边框在 hover 后瞬间变粗，无动画
• 控制台没报错，但 CSS 动画完全不生效
• 尝试用 all 0.3s 也无效（因为 border-width 本身不可插值）
用 border-image 或 outline 模拟可过渡的“边框效果”
真正能过渡的是 outline-width 和 border-image-slice（配合 border-image-source），但更可靠、兼容性更好的方案是改用 outline + box-shadow 组合模拟：
-
outline支持过渡（且不占布局空间），适合外发光类强调效果 -
box-shadow的spread-radius可以平滑缩放，视觉上等效于“加粗边框” - 若必须保留真实
border，可先设border-width: 0，再用box-shadow模拟初始态，hover 时增大spread-radius
示例（用 box-shadow 模拟）：
立即学习“前端免费学习笔记（深入）”；
