如何避免使用CSS _transition在改变border-width时出现的bug问题？

本文共计1153个文字，预计阅读时间需要5分钟。

浏览器不支持对 `border-width` 做平滑过渡，您使用 `transition: border-width 0.3s` 只会看到跳变——即从旧值瞬间切换到新值，没有中间过渡。这不是写法错误，而是CSS规范明确指出不支持对这类属性进行平滑过渡（它属于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。