border-color和border-width可单独过渡，但需显式写单位、保持border-style一致、避免border:none，且注意firefox中transparent的兼容性问题。
border-color 和 border-width 不能同时用 transition 直接过渡
css 的 border 是复合属性，浏览器对它的过渡支持很有限：直接写 transition: border 0.3s 大概率失效，尤其在改变粗细时会“跳变”。根本原因是 border 展开后包含颜色、宽度、样式三个维度，而 border-style 不支持过渡，连带影响整体行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对可过渡的单个子属性做声明，比如
transition: border-color 0.3s, border-width 0.3s - 确保起始和结束状态中
border-style一致（通常是solid），否则过渡会中断或不触发 - 避免用
border: none作为终点——它等价于border-width: 0，但和border-width: 2px之间无法平滑插值，改用border-width: 0px更稳妥
border-width 过渡必须用带单位的数值
写成 border-width: 0 看似简洁，但在 transition 中会被当作“无单位数字”，导致浏览器无法计算中间值，结果就是瞬间消失，没有动画。这是最常被忽略的隐性坑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终显式写出单位：
border-width: 0px、border-width: 2px，哪怕值为 0 - 如果要从无边框渐显，起始状态也得是
border: 0px solid transparent，而不是border: none - 注意：百分比、em 等相对单位在
border-width中不合法，只能用px、rem、vh等绝对或视口单位
:hover 里改 border 可能引发布局抖动
当元素原本没边框（border-width: 0），:hover 加上 border-width: 2px 时，元素宽高会突然增加，导致周围内容重排——这不是过渡问题，而是盒模型本身的变化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 预留空间：初始状态用
border: 2px solid transparent，hover 时只变border-color，这样宽度不变，无抖动 - 若必须改变粗细，配合
box-sizing: border-box并预先设置padding补偿，或用outline替代（但 outline 不占布局空间，也不支持圆角） - 检查父容器是否设置了
overflow: hidden，加边框后若超出可能被裁剪，看起来像“没动”
Firefox 下 border-color 透明过渡有兼容性陷阱
在 Firefox 中，border-color: transparent 和 border-color: #007bff 之间过渡，有时会先闪一下灰黑色，尤其在低版本。这是因为 transparent 实际解析为 rgba(0,0,0,0)，颜色空间插值出错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免用
transparent做过渡起点/终点，改用同色系的全透明色，比如rgba(112, 123, 189, 0)配合rgba(112, 123, 189, 1) - 如果颜色不确定，统一用
hsla()格式过渡（如hsla(210, 100%, 50%, 0)→hsla(210, 100%, 50%, 1)），HSLA 在各浏览器中插值更稳定 - 测试时务必在 Firefox 最新稳定版 + 一个旧版（如 115）中验证，别只信 chrome 表现
真正麻烦的不是写几行 transition，而是每改一个值都要想清楚它在盒模型里占不占空间、在颜色空间里能不能线性插值、在不同引擎里怎么解析——这些细节一漏，动画就断在用户眼皮底下。