边框颜色过渡生效的前提是元素已定义完整边框（含width和style），仅设border-color无效；正确写法为border:2px solid #ccc并配合transition:border-color 0.3s。
边框颜色变化瞬间生效，是因为默认没有启用过渡效果。要让 border-color 变化平滑，必须显式设置 transition 属性，且确保边框本身已定义（包括宽度和样式），否则过渡不会触发。
必须先定义完整的 border
CSS 中 transition 对 border-color 生效的前提是：元素已有可计算的边框（即 border-width 和 border-style 已设置）。如果只写 border-color: red，而没设 solid 或 1px，浏览器认为“无边框”，颜色变化就无法过渡。
- ✅ 正确写法（过渡可用）：
border: 2px solid #ccc;
transition: border-color 0.3s ease; - ❌ 错误写法（过渡无效）：
border-color: #ccc;
transition: border-color 0.3s ease;
推荐用 transition 简写或单独控制
为避免意外覆盖其他过渡属性，建议明确指定要过渡的属性：
- 只过渡颜色：
transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); - 同时过渡颜色+宽度（如 hover 时加粗）：
transition: border-color 0.3s, border-width 0.3s; - 简写方式（注意顺序）：
transition: border 0.3s;（会过渡所有 border 相关属性，但需确保初始和目标状态都含完整 border）
常见失效原因与修复
即使写了 transition，也可能“看起来没动”，通常是这些细节出错：
立即学习“前端免费学习笔记（深入）”；
-
初始状态未设边框：比如
border: none→ hover 设border: 2px solid red，此时不是“颜色变化”，而是“从无到有”，border-color过渡不生效。应改为：
border: 2px solid transparent;
transition: border-color 0.3s;
&:hover { border-color: red; } - 伪类选择器权重不足：确保 hover 规则能覆盖初始样式（如用了 class 但 hover 写在前面，可能被忽略）。
-
color 值类型不一致：避免
#f00→rgb(255,0,0)这类隐式转换，统一用 hex、hsl 或 rgba 更稳妥。
配合 :focus / :hover 的实用示例
按钮或输入框常需交互反馈，这样写更可靠：
input {border: 1px solid #d1d5db;
transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
这样既平滑又符合可访问性习惯。
