border-color过渡必须预先定义border样式（宽度+样式），否则动画不触发；起始和结束border-style需一致，避免使用transparent或none，推荐用rgba/hsla同色系渐变，并精准声明transition属性。
border-color 必须配合已定义的 border 样式才能过渡
直接写 transition: border-color 却没设初始 border，动画根本不会触发。浏览器需要明确的起始边框“结构”（宽度 + 样式）才能插值颜色变化。
- 错误写法：
.box { transition: border-color 0.3s; }→ hover 时加border: 2px solid blue，结果是瞬间出现，无过渡 - 正确写法：默认就写全
border: 2px solid #ddd或border: 2px solid transparent，hover 里只改border-color - 务必保持
border-style一致（如始终用solid），否则 Firefox 和 Safari 可能中断过渡
transparent 不是万能起点，Firefox 下容易闪黑
在 Firefox 中，border-color: transparent 实际被解析为 rgba(0, 0, 0, 0)，与目标色（如 #007bff）做 RGB 插值时，中间帧可能短暂呈现灰黑色，尤其在低版本或深色背景下明显。
- 稳妥替代方案：用同色系的全透明色，比如起始写
border-color: rgba(112, 123, 189, 0)，结束写rgba(112, 123, 189, 1) - 更通用做法：统一用
hsla()，例如hsla(210, 100%, 50%, 0)→hsla(210, 100%, 50%, 1)，避免通道错位 - 不要混用
transparent和currentcolor，部分旧 Edge 会 fallback 到硬切
别用 border: none 做终点，它不参与插值
border: none 等价于 border-width: 0，但和 border-width: 2px 之间无法线性插值——浏览器不知道“0”该对应什么单位，结果就是边框突然消失，没有渐隐效果。
- 想实现“边框浮现/收回”，起始和结束都必须带单位：
border: 2px solid transparent→border-color: #2563eb - 如果真要收掉边框，终点写
border-width: 0px（注意px），而非none；但更推荐用透明色+视觉隐藏，避免布局抖动 - 用
border-width: 0px时，确保border-style仍为solid，否则 Safari 可能忽略过渡
过渡只写 border-color，别偷懒用 all
写 transition: all 0.3s 看似省事，但一旦元素后续加了其他可动画属性（比如 padding、font-size），就会意外触发无关动画，影响性能和预期行为。
- 精准控制：只声明需要的属性，
transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) - 多个边框属性需分别写：
transition: border-color 0.3s, border-width 0.3s（注意border-width必须带单位） - 缓动函数别省略，
cubic-bezier(0.4, 0, 0.2, 1)比ease更适合颜色类过渡，起止更柔和
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
