border-color过渡失效的主因是边框未持续存在，需初始声明border-width、border-style（如solid）、border-color（可用transparent），再通过transition控制颜色变化。
border-color 过渡失效的常见原因
直接给 border-color 加 transition 却没效果，大概率是因为边框本身不存在——比如元素初始 border-width 是 0 或 none。CSS 过渡无法在 0px 和 2px 之间插值颜色，更无法从 none 变成 solid。
- 确保初始状态已声明完整边框：至少包含
border-width、border-style、border-color - 避免用
border: none重置后又只改border-color；应统一用border-color: transparent代替 -
border-style必须是可过渡的值（如solid、dashed），hidden或none会中断过渡
正确写法：用 transparent + solid 实现平滑变色
核心思路是让边框始终存在，仅改变颜色。初始设为透明色，悬停时变为实色，配合 transition 即可生效。
button {
border: 2px solid transparent;
transition: border-color 0.3s ease;
}
button:hover {
border-color: #007bff;
}
注意：border 简写会覆盖所有子属性，所以必须保证初始 border-style 不是 none。如果已有其他边框样式（如只想要下边框），就单独写：
a {
border-bottom: 2px solid transparent;
transition: border-bottom-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover {
border-bottom-color: #e74c3c;
}
兼容性与性能提示
border-color 是 CSS 中少数支持硬件加速的属性之一，过渡基本无卡顿。但要注意：
立即学习“前端免费学习笔记（深入）”；
- IE 10+ 支持
border-color过渡，IE9 及以下不支持，且不触发回退逻辑 - 不要对
border简写属性本身加transition（如transition: border 0.3s），它不会按预期工作 - 若同时需要宽度变化（如 hover 时加粗），应分开过渡：用
border-width+border-color两个声明，并共用同一transition声明
替代方案：box-shadow 模拟边框过渡
当必须从「无边框」切换到「有边框」，又不想破坏布局（比如边框出现导致元素位移），可用 box-shadow 模拟：
.card {
transition: box-shadow 0.2s ease;
}
.card:hover {
box-shadow: 0 0 0 2px #2ecc71;
}
这种方式不改变元素盒模型，无需预留边框空间，但阴影不响应点击区域（需额外加 padding 或 outline 补偿）。真正需要交互边框时，还是优先走 transparent → color 路径。
最易被忽略的一点：过渡是否生效，和父元素是否触发 BFC、是否启用 will-change 无关；关键只在「边框是否持续存在」。检查 computed styles 里 border-top-style 是否始终为 solid，比调各种动画参数更管用。
