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 模拟）：
立即学习“前端免费学习笔记（深入）”；
.btn {
border: none;
box-shadow: 0 0 0 2px #ccc;
transition: box-shadow 0.2s ease;
}
.btn:hover {
box-shadow: 0 0 0 4px #007bff;
}
border-collapse 和 table 边框的特殊处理
如果是 <table>，<code>border-collapse: collapse 下的单元格边框无法单独过渡——整个表格边框由渲染引擎合并计算，transition 对 border-width 完全失效。
可行替代方案：
- 改用
border-collapse: separate，再给td单独设border和transition - 用
outline覆盖单元格，避免影响表格结构 - 放弃边框动画，改用
background-color或transform: scale()做视觉反馈
真正需要 border-width 变化的场景，用 JavaScript 驱动
当设计强制要求“真实 border 变粗”（比如金融类 UI 的高亮校验边框），且必须支持 IE11+ 或需精确控制中间帧时，CSS 过渡走不通，就得用 JS：
- 监听事件，用
requestAnimationFrame逐帧修改style.borderWidth - 借助
Web Animations API：调用element.animate({ borderWidth: ['2px', '4px'] }, { duration: 300 }) - 注意：JS 方案会触发重排（reflow），频繁操作性能较差，仅限必要场景
容易被忽略的一点：即使用了 JS，也要确保初始 border-style 不为 none——border-width 在 border-style: none 下无论设多大都不可见，过渡自然也看不到。
