border-width 不支持 transition 动画，因其属离散型属性；可用 border-color 透明度变化、border-image 或 outline 模拟渐变效果。
transition 不能直接动画 border-width
浏览器根本不支持对 border-width 做平滑过渡，哪怕你写了 transition: border-width 0.3s，它也只会“跳变”——从旧值瞬间切到新值，没有中间帧。这不是写法错，是 CSS 规范里明确不支持的可动画属性（border-width 属于“discrete”类型，不是“interpolable”）。
常见错误现象：border 看起来“闪一下”或“突兀加粗”，hover 时没过渡感；DevTools 里能看到 transition 被声明了，但 timeline 录不到任何插值过程。
- 真正能被
transition平滑处理的边框相关属性只有：border-color、border-opacity（需配合 RGBA）、border-style（仅部分值间可过渡，不推荐依赖） -
border-width的数值变化（比如1px → 3px）本质是 layout 变更，触发重排（reflow），浏览器不会为它做插值计算 - 别试图用
transform: scale()模拟——它缩放的是整个元素，连内容一起变，语义和布局都错了
用 border-image + transition 实现视觉上的“宽度渐变”
绕过 border-width 限制最稳妥的方式，是把边框“画”出来而不是“设”出来：用 border-image 配合可动画的 border-image-slice 或透明度控制，再结合 transition。
使用场景：需要 hover 时边框“慢慢变厚”的卡片、按钮、输入框；要求视觉平滑且不破坏原有盒模型。
立即学习“前端免费学习笔记（深入）”；
- 核心思路：用一张细线 SVG 或渐变背景图作为
border-image，通过border-image-slice控制“显示区域”，再用opacity或border-image-outset（有限支持）模拟厚度变化 - 更实用的做法是固定
border-width: 4px，然后只动画border-color的透明度：border-color: rgba(0,0,0,0) → rgba(0,0,0,0.8)，人眼会感知为“从无到有、从细到实” - 示例：
button { border: 4px solid transparent; transition: border-color 0.25s; }<br>button:hover { border-color: rgba(0,0,0,0.7); }
用 outline 替代 border 做可动画的“外边框”
如果业务逻辑允许边框不占布局空间（即不需要影响元素尺寸或相邻元素位置），outline 是更轻量、更可控的选择——它支持 outline-width 的过渡（Chrome/Firefox 已支持多年，Safari 16.4+ 开始支持）。
注意：outline 不参与文档流，也不会触发重排，性能更好；但它无法设置圆角（outline-radius 不存在），也不能分边设置。
- 必须显式设
outline-style: solid（或其他值），否则outline-width动画无效 - Safari 旧版本（outline-width 仍不支持过渡，需加
@supports检测或降级为border-color方案 - 示例：
a { outline: 0 solid #007bff; transition: outline-width 0.2s, outline-color 0.2s; }<br>a:hover { outline-width: 2px; outline-color: #007bff; }
为什么 box-shadow 比 border 更适合“伪边框动画”
绝大多数所谓“border 变宽动画”的实际需求，本质是要一个**不影响布局、可精确控制、能平滑过渡的外围强调效果**——这时候 box-shadow 比 border 更合适，而且完全支持 transition。
性能上，box-shadow 是纯绘制层操作，不触发布局，GPU 加速友好；兼容性也远好于 outline-width 过渡。
-
box-shadow的spread-radius参数（第四个值）视觉上等效于“向外扩展的边框”，且可直接过渡：box-shadow: 0 0 0 0 #000 → 0 0 0 4px #000 - 要模拟双层边框？叠两层
box-shadow，分别控制spread-radius和模糊值 - 注意别漏掉
inset关键字——如果误写成inset，动画方向就反了
真正卡住人的地方，往往不是“怎么写过渡”，而是没意识到 border-width 本身就不在浏览器的动画属性白名单里。一旦默认它该动，就会反复调时间函数、查语法、怀疑浏览器 bug——其实只是在对抗规范。
