结论：应使用 transition: border-color 0.3s ease 而非 transition: border 0.3s，因 border 是复合属性无法插值，且 Safari 等浏览器中后者大概率失效；需预先声明透明边框占位并确保 transition 写在基础选择器中。
直接说结论：用 transition: border-color 0.3s ease，而不是 transition: border 0.3s ——后者在 Safari 和旧版 Chrome 里大概率不生效。
为什么 transition: border 不起作用
因为 border 是复合属性（包含 border-width、border-style、border-color），浏览器无法对“整个 border”做插值动画。只有单个可计算的子属性才能被 transition 精确控制。
-
border-color可过渡，且语义清晰：颜色变化最常用、视觉反馈明确 -
border-width可过渡，但宽度从0→2px会触发重排（reflow），导致卡顿或抖动 - 如果初始写的是
border: none，聚焦时设border: 2px solid #007bff，动画基本失效——浏览器没东西可插值
必须提前声明固定边框宽度
避免重排和动画跳变，基础样式里就得保留边框结构：
input {
border: 2px solid transparent; /* 不是 none，也不是 #ccc */
transition: border-color 0.3s ease;
}
input:focus {
border-color: #007bff;
}- 透明边框占位，不破坏布局，又让
border-color有明确起点和终点 - 别依赖
outline替代边框动画——它默认有偏移，且部分安卓 WebView 对outline-offset支持差 - 如果要用
outline做高亮（比如外发光），建议单独加：outline: 2px solid rgba(0, 123, 255, 0.2)，并确保基础态outline: none
Safari 动画不播？检查这三处
Safari（尤其 iOS 微信内置浏览器）对 :focus 上的 transition 比较挑剔：
立即学习“前端免费学习笔记（深入）”；
-
transition必须写在非伪类的基础规则里（即input { ... }），不能只写在input:focus { ... }中 - 补全前缀：
-webkit-transition: border-color 0.3s ease，内嵌 WebKit 引擎仍可能需要 - 确保 CSS 是初始加载的，不是 JS 动态插入——否则:focus 触发时样式还没就绪，动画直接跳过
想更顺滑？优先用 box-shadow 或 transform
纯边框色变已够用，但若要更高质感或兼容性兜底，可组合使用：
-
box-shadow不影响布局，支持硬件加速，适合做“光晕”式反馈：box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2) - 配合
border-color一起过渡：transition: border-color 0.3s ease, box-shadow 0.3s ease - 避免写
transition: all 0.3s——它会拖慢性能，且可能意外过渡到不可控属性（比如font-size）
真正容易被忽略的是：动画是否在所有焦点方式下都生效。比如键盘 Tab 进入、屏幕阅读器聚焦、甚至点击 label 关联的 input ——这些场景下，:focus 都必须可靠触发。别只测鼠标点击。
