border-color 过渡需先声明完整边框（如 border: 2px solid #999），否则因无有效起始值而失效；transition 应置于初始状态，仅改 color 值；避免 transition: all；动画复杂时用 @keyframes。
border-color 不能直接用 transition 过渡
HTML5 本身不提供“边框颜色过渡”这个独立功能，本质是 CSS 的 transition 作用于 border-color 属性。但很多人写完发现没效果——最常见原因是：没有显式声明初始 border（包括宽度和样式），导致浏览器无法插值计算颜色变化。
CSS 要求：只有可计算、有明确起始值和结束值的属性才能被 transition 动画。而 border-color 在未设置 border-style（如 solid）时，默认为 none，此时颜色值被视为“无效状态”，过渡失效。
- 必须同时设置
border-width、border-style和border-color才构成完整边框 - 推荐用简写
border: 2px solid #ccc而非只写border-color: #ccc -
transition需放在初始状态（非:hover等伪类中）
正确写法：用 border 简写 + transition
以下是最小可靠写法，兼容所有现代浏览器（Chrome/Firefox/Safari/Edge）：
button {
border: 2px solid #999;
transition: border-color 0.3s ease;
}
button:hover {
border-color: #007bff;
}
注意：border 简写会重置所有子属性，所以 hover 里只改 border-color 是安全的；但如果初始用了 border-top: 2px solid #999，那 hover 里也得用 border-top-color，否则其他方向边框会退回到默认值。
立即学习“前端免费学习笔记（深入）”；
- 不要写
transition: all 0.3s—— 它会意外触发布局重排（比如border-width变化） - 时间单位必须带
s或ms，写0.3无效 - 如果想四边分别过渡不同颜色，需用
border-top-color、border-right-color等单独声明并分别加 transition
遇到“过渡一闪而过”或“不触发”的排查点
这类问题几乎都源于样式层叠或渲染时机异常，不是 HTML5 的限制，而是 CSS 应用顺序或元素状态判断错误：
- 检查是否在
:hover中写了border: 2px solid #007bff—— 这会覆盖整个边框，导致从“无边框”突变，失去过渡基础 - 确认元素没有被
display: none或visibility: hidden暂时隐藏，否则 transition 不会启动 - 使用
transform: translateZ(0)或will-change: border-color可强制开启硬件加速，避免某些 Safari 下偶发卡顿 - 如果边框颜色来自 CSS 变量（
--border-color），注意transition对自定义属性默认无效，需配合@property（仅 Chrome 110+ 支持）或 JS 控制
需要更复杂动效？用 @keyframes 替代 transition
当过渡不止两种颜色、或需循环/延迟/多段节奏时，transition 就不够用了。此时改用 @keyframes + animation 更可控：
@keyframes borderPulse {
0% { border-color: #999; }
50% { border-color: #007bff; }
100% { border-color: #999; }
}
button.pulse {
animation: borderPulse 2s infinite;
}
注意：动画中若修改 border-width 或 border-style，会导致重排（reflow），性能比纯颜色变化差很多；纯 border-color 动画是 GPU 友好的。
真正容易被忽略的是：过渡生效的前提，从来不是“用了 HTML5”，而是“DOM 元素已渲染完成且具备可计算的边框盒模型”。哪怕一行 JS 插入后立刻加 class，也可能因渲染队列未 flush 而丢帧——这种时候，requestAnimationFrame 包一层 class 切换才真正稳妥。
