不能只靠 outline-color 单独设置输入框焦点边框颜色，必须配合 outline-style 才生效；多数场景应清除默认 outline 后用 border 控制，兼顾美观与可访问性。
直接说结论：不能只靠 outline-color 单独设置输入框焦点边框颜色——它必须配合 outline-style 才生效，且默认行为是干扰视觉的“双色高亮”，多数场景下你真正需要的是先清掉默认 outline，再用 border 控制边框。
为什么只写 outline-color: blue 没反应？
因为 outline-color 是“有轮廓才管颜色”，而轮廓是否出现，由 outline-style 决定。浏览器默认给 input:focus 加的是 outline: -webkit-focus-ring-color auto 1px（Safari/Chrome）或类似值，但这个值不显式声明 outline-style，导致单独改 outline-color 被忽略。
-
outline-style必须显式设为dotted、solid等非none值，outline-color才起作用 - 很多现代浏览器（如 Chrome 120+）对
outline-color: invert的支持已弱化，invert不再可靠，别依赖它 - 若父元素设置了
color: transparent，而你又用了outline-color: currentColor，结果就是看不见轮廓
input:focus 时想换颜色，该用 border 还是 outline？
绝大多数 UI 场景下，应该用 border —— 因为它可控、可圆角、能和设计稿对齐；outline 更适合保留给键盘导航的无障碍焦点指示。
- 用
border：需先清除默认outline，否则会叠加显示（蓝边+绿边同时出现）input:focus { outline: none; border-color: #4a90e2; } - 若坚持用
outline（比如要保留原生焦点反馈），推荐一次性写全：input:focus { outline: 2px solid #4a90e2; outline-offset: 2px; } - 注意
outline-offset：加个2px可避免紧贴边框的“毛边感”，视觉更干净
兼容性与可访问性绕不开的坑
移除 outline 很容易，但会让键盘用户失去焦点位置感知——这是 WCAG 2.4.7 强制要求的可见焦点指示。
- 禁用
outline后，必须提供等效替代：input:focus { outline: none; border: 2px solid #4a90e2; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3); } - 别用
outline: 0：它在部分旧版 Safari 中不等价于outline: none，可能残留虚线 - IE8 及更早版本不支持
outline，但如今基本无需考虑；不过outline-offset在 Firefox 早期版本中存在渲染偏移 bug
真正难的不是写对那行 CSS，而是判断「这个输入框谁在用、怎么用」——鼠标用户要的是美观边框，键盘用户要的是清晰焦点，两者冲突时，优先保后者。别为了省一行 box-shadow 让整页表单对屏幕阅读器用户不可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
