border-color过渡必须基于始终存在的边框，初始设为border: 2px solid transparent，仅通过改变border-color实现动画；transition需明确指定border-color而非all或border，且初始样式必须包含border-style。
border-color 不能直接从无到有过渡
直接写 border: none → border: 2px solid blue，transition 不会生效。浏览器无法对“无”和“有”之间插值，更别说颜色了。必须让边框始终存在，只变颜色。
常见错误现象：border 属性值整体变化（比如从 none 切到 solid #007bff），控制台没报错，但动画完全消失，hover 时边框“啪”一下出现。
- 正确做法：初始就定义
border: 2px solid transparent或border: 2px solid #eee - 过渡目标只改
border-color，不碰border-width和border-style - 如果用 JS 动态加 class，确保该 class 里只设置
border-color，别带其他 border 相关声明
transition 必须显式指定 border-color
写 transition: all 0.3s 看似省事，但容易误触其他属性（比如意外过渡 border-width 导致抖动），也增加重绘开销。明确锁定目标更稳。
使用场景：按钮悬停、表单输入框聚焦、Tab 页签激活态切换。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
transition: border-color 0.3s ease-in-out - 避免写法：
transition: border 0.3s——border是简写属性，浏览器行为不一致，部分版本可能忽略 - 缓动函数选
ease-in-out比ease更柔和，尤其对颜色这种视觉敏感属性
透明边框（transparent）是安全的起始色
用 transparent 代替 rgba(0,0,0,0) 或 hsla(...,0)，兼容性更好，且语义清晰——它就是“有边框，但不可见”，不是“没边框”。
性能影响：transparent 不触发重排，只涉及重绘，和纯色一样轻量。
- 初始样式必须含
border-style（如solid），否则transparent无效 - 示例：
.input { border: 1px solid transparent; transition: border-color 0.25s; } .input:focus { border-color: #007bff; } - 注意：不要在
:focus里再写border-style，否则可能覆盖初始定义导致跳变
伪元素或 JS 切换 class 时要注意继承链
如果用 JS 添加 .active 类来触发动画，而该类定义在更深层的选择器下（比如 .nav-item.active），要确认它的 border-color 声明优先级高于基础样式。否则 transition 可能不触发。
容易踩的坑：CSS 优先级混乱 + transition 属性写在低优先级规则里 = 动画静音。
- 检查方式：打开开发者工具，看 computed 标签下
transition是否生效，border-color是否被正确计算 - 稳妥做法：把
transition写在基础选择器（如.btn）上，而非状态类（如.btn:hover）中 - 伪元素（如
::before）模拟边框时，transition必须写在伪元素自身规则里，父元素设了没用
