border-width 直接过渡效果生硬，因浏览器无法在无边框（none）与有边框间平滑插值；应始终声明 border-style，或改用 outline、box-shadow、伪元素等更顺滑方案。
直接对 border-width 使用 transition 通常效果生硬、突兀，根本原因是：浏览器无法在不同宽度值之间做平滑插值——尤其是当边框样式（border-style）为 none 或未显式设置时，border-width 的动画会被强制截断或跳变。
确保 border-style 始终存在
边框动画的前提是边框“始终可见”。如果初始状态是 border: none，过渡到 border: 2px solid #000，浏览器会跳过中间帧，直接切换。
- ✅ 正确做法：始终声明
border-style（如solid），仅变化width和color - ❌ 错误写法：
border: 0; → border: 2px solid #333;（style 从无到有，触发重排+跳变）
用 outline 替代 border 实现更顺滑的“伪边框”动画
outline 不影响布局，且支持 outline-width 的平滑过渡（尤其在 Chrome/Firefox 中表现稳定）。
- 初始态：
outline: 2px solid transparent; - 悬停态：
outline: 2px solid #007bff;（只变 color，width 不变 → 无跳变） - 若需宽度变化：可搭配
outline-offset模拟“缩放感”，或用box-shadow替代
用 box-shadow 模拟边框动画（推荐方案）
这是最可靠、兼容性最好、动画最顺滑的方式。通过控制 box-shadow 的模糊半径和偏移，可精准模拟边框粗细变化，且全程不触发重排。
立即学习“前端免费学习笔记（深入）”；
- 初始态：
box-shadow: 0 0 0 1px rgba(0,0,0,0.1); - 激活态：
box-shadow: 0 0 0 3px rgba(0,123,255,0.3); - 配合 transition：
transition: box-shadow 0.3s ease; - 优势：支持任意颜色/透明度/圆角衔接，无 border-style 依赖，动画丝滑
进阶：用 transform + pseudo-element 模拟动态边框
当需要精确控制每条边、或实现描边增长等动效时，可用伪元素 + transform: scale() 或 width/height 动画。
- 给元素设
position: relative -
::after绘制一层与边框位置一致的矩形，初始scale(0)或width: 0 - hover 时
scale(1)或width: 100%，配合transition: transform .3s - 适合按钮描边入场、卡片浮出边框等设计场景
不复杂但容易忽略：动画是否自然，关键不在“加 transition”，而在于选对可插值、不影响布局、浏览器支持良好的 CSS 属性。
