border-color过渡失效主因是未显式声明初始颜色，导致currentcolor→具体色值无法插值；应显式设border-color、避免简写覆盖、transition写在常态规则；box-shadow更可靠，但需用transparent而非none，旧版safari需降级outline或双保险方案。
focus 时 border-color 过渡失效的常见原因
直接给 input:focus 设置 transition: border-color 0.3s 却没效果？大概率是因为初始 border-color 没显式声明。css 中若元素默认用 border: 1px solid，实际浏览器会把未指定颜色解析为 currentcolor（通常为黑色），但这个值和你 focus 时写的 #007bff 之间无法做颜色插值——不是“颜色变化”，而是“currentcolor → 具体色值”的类型切换，transition 不触发。
- 务必在非 focus 状态显式定义
border-color，比如border: 1px solid #ccc - 避免混用
border简写和单独的border-color：简写会重置所有子属性，可能覆盖掉你之前设的过渡 - 确保
transition写在常态规则里（input），而非只写在:focus里
box-shadow 实现焦点高亮比 border 更可靠
box-shadow 不依赖边框是否存在，也不受 border-style 影响，过渡更稳定，视觉上也更现代。它还能绕过某些浏览器对 border 渲染的像素对齐问题。
- 推荐写法：
input { box-shadow: 0 0 0 2px transparent; transition: box-shadow 0.2s; } input:focus { box-shadow: 0 0 0 2px #007bff; } - 注意
transparent是关键：不能写成none，否则从none→ 具体阴影无法过渡 - 若同时用
border和box-shadow，建议 focus 时把border-color也同步改掉，保持视觉一致
需要兼容旧版 Safari 的写法
Safari 15.4 之前对 box-shadow 的颜色过渡支持不完整，尤其在从 transparent 开始时可能卡顿或跳变。这时可以降级使用 outline + outline-offset 配合 transition，但它不占布局空间，需手动模拟边框位置。
- 稳妥方案：
input { outline: none; border: 1px solid #ccc; transition: border-color 0.2s, box-shadow 0.2s; } input:focus { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0,123,255,0.2); } - 避免只靠
outline：它无法被border-radius圆角裁剪，且部分屏幕阅读器行为不一致 - 测试真机 Safari，别只信桌面模拟器
transition 触发时机与性能提示
过渡是否生效，还取决于浏览器是否将该属性列为“可动画属性”。border-color 和 box-shadow 都是，但如果你在 :focus 里同时改了 height 或 padding，就可能触发 layout，导致过渡卡顿。
立即学习“前端免费学习笔记（深入）”；
- 只对真正需要动画的属性加
transition，例如transition: border-color 0.2s, box-shadow 0.2s，别写成transition: all 0.2s - 用
will-change: border-color, box-shadow在 focus 前预提示（慎用，仅当实测有卡顿时加） - 移动端要注意：ios Safari 对快速连续 focus/blur 的过渡有时会丢帧，可加
transform: translateZ(0)强制 GPU 加速（副作用是可能影响 z-index 层级）
过渡本身很简单，难的是让不同浏览器、不同输入法、不同聚焦方式（鼠标 click / tab / js focus()）下都表现一致。border-color 容易栽在隐式值上，box-shadow 容易栽在 transparent 的写法和 Safari 版本上。