输入框聚焦边框变色不生效，主因是transition未正确作用于border-color等变更属性、Safari对outline和原生样式的干预、移动端焦点异常及性能优化不足。
输入框聚焦时边框变色不生效？检查 transition 属性是否作用于正确属性
很多情况下写好了 :focus 样式，但颜色或宽度变化“跳变”而非平滑过渡，根本原因是 transition 没有覆盖到实际变更的 CSS 属性。比如只写了 transition: all 0.3s，看似万能，但某些浏览器对 all 的兼容性差，且可能触发不必要的重绘。
- 明确指定要过渡的属性，例如边框颜色就用
transition: border-color 0.3s ease - 确保默认状态（非
:focus）和聚焦状态都定义了该属性，否则浏览器无法插值——比如默认没设border-color，聚焦时设为#007bff，过渡会失效 - 避免在
:focus中修改display、height（内容高度变化）、font-size等会触发布局重排的属性，它们过渡卡顿且不可控
为什么 input:focus + transition 在 Safari 上偶尔失灵？
Safari 对表单控件的原生样式有更强干预，默认会忽略部分自定义 border 或 outline 样式，尤其当未显式清除 outline 时，:focus 效果会被系统高亮覆盖，导致过渡“看不见”。
- 务必加
outline: none到:focus规则中（注意：需配合可访问性方案，比如用box-shadow替代） - Safari 15.4+ 对
transition的起始值识别更严格，建议默认状态也显式写出初始值，例如：border: 2px solid #ccc而非依赖浏览器默认 - 如果用了
appearance: none，记得在:focus中重新声明所有被重置的样式，否则过渡链断裂
如何让聚焦效果包含阴影 + 边框 + 背景微调，且保持性能？
多个属性同时过渡容易引发重绘，尤其是 box-shadow 和 background-color。应优先使用仅触发合成器（compositor）的属性，减少主线程压力。
