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，比调各种动画参数更管用。