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 边框的特殊处理
如果是 可行替代方案： 当设计强制要求“真实 border 变粗”（比如金融类 UI 的高亮校验边框），且必须支持 IE11+ 或需精确控制中间帧时，CSS 过渡走不通，就得用 JS： 容易被忽略的一点：即使用了 JS，也要确保初始 ，
border-collapse: collapse 下的单元格边框无法单独过渡——整个表格边框由渲染引擎合并计算，transition 对 border-width 完全失效。
border-collapse: separate，再给 td 单独设 border 和 transition
outline 覆盖单元格，避免影响表格结构background-color 或 transform: scale() 做视觉反馈真正需要 border-width 变化的场景，用 JavaScript 驱动
requestAnimationFrame 逐帧修改 style.borderWidth
Web Animations API：调用 element.animate({ borderWidth: ['2px', '4px'] }, { duration: 300 })
border-style 不为 none——border-width 在 border-style: none 下无论设多大都不可见，过渡自然也看不到。
