边框颜色切换需添加 transition 属性实现平滑过渡：将 transition: border-color 0.3s ease 写在默认状态，确保 border-style 和 border-width 一致，避免写在 :hover 中或使用 transition: all。
边框颜色切换太快，本质是 hover 时 border-color 突然变化，缺少过渡动画。只需给元素添加 transition 属性，专门控制 border-color 的变化时长和缓动即可，不需要 JS 或复杂 hack。
确保 transition 写在默认状态（非 hover）上
很多同学把 transition 写在 :hover 里，这会导致鼠标移入时有动画，但移出时立刻跳变——因为移出时 hover 样式失效，浏览器没机会执行反向过渡。正确做法是把 transition 放在元素的常态规则中：
-
✅ 正确：
.btn { border: 2px solid #ccc; transition: border-color 0.3s ease; }.btn:hover { border-color: #007bff; } -
❌ 错误：
.btn:hover { border-color: #007bff; transition: border-color 0.3s ease; }（移出无过渡）
用 transition-property 精准控制，避免影响其他属性
如果元素还设置了 color、background 等也带 hover 变化，直接写 transition: all 0.3s 会让所有属性一起动，可能造成意外动画。推荐显式指定：
- 只过渡边框颜色：
transition: border-color 0.3s ease; - 需要同时过渡边框+文字色：
transition: border-color 0.3s ease, color 0.3s ease;
注意 border-style 和 border-width 必须保持一致
border-color 能平滑过渡的前提是：border 的 样式（style）和宽度（width）不能变。如果 hover 时写了 border: 3px dashed blue，而默认是 border: 2px solid gray，浏览器会因 style/width 不匹配而放弃过渡，直接跳变。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全写法：默认和 hover 都用
solid，且border-width相同（如都是2px） - ⚠️ 避免写法：
border: 2px solid #999→border: 2px dashed #007bff（style 改变，过渡失效）
进阶：用自定义贝塞尔曲线让过渡更自然
默认的 ease 是先慢后快再慢，适合大多数场景；若想更柔和或更有节奏感，可换缓动函数：
- 更舒缓的入场：
transition: border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - 轻微弹性感（慎用）：
transition: border-color 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55); - 线性匀速（少用，略显机械）：
transition: border-color 0.3s linear;
基本上就这些。关键是 transition 放对位置、属性写明确、border 结构保持稳定。不复杂但容易忽略细节。
