outline不能直接用于焦点高亮，因其不响应border-radius、outline-offset兼容性差且IE存在强制渲染问题；主流方案是outline:none配合box-shadow模拟圆角发光效果。
直接用 outline 做焦点高亮，大概率会出视觉 bug：四角生硬、不贴合圆角、IE/Chrome 表现不一致。真正可靠的做法是禁用 outline，改用 box-shadow 模拟外发光，并配合 border-color 微调边界——这是当前主流框架（如 Bootstrap、Tailwind）的实际做法。
为什么不能只靠 outline:focus
outline 的设计本意是辅助访问性（键盘导航聚焦提示），不是视觉装饰。它有三个硬限制：
-
outline不响应border-radius，哪怕元素设置了border-radius: 6px，outline四角仍是直角 -
outline-offset在 Safari 和旧版 Chrome 中对input元素支持不稳定，负值可能被忽略或触发重绘异常 - IE6–9 会强制渲染默认虚线
outline，即使写了outline: none，也得靠outline: thin dotted \9这类 hack 补救
box-shadow:focus 是更可控的替代方案
box-shadow 能完美继承元素的圆角形状，且支持多层、透明度、模糊与扩张控制。关键参数是第四个值 spread：
-
box-shadow: 0 0 0 2px #3b82f6→ 无偏移、无模糊、2px 扩张，就是一圈紧贴边框的“光晕” - 加
inset可做内发光：box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3) - 要模拟“渐变发光”，可叠两层：
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4), 0 0 8px rgba(59, 130, 246, 0.2)
注意：所有浏览器都支持 box-shadow 的 spread 参数（包括 IE10+），无需前缀。
必须显式关闭 outline 才能避免双高亮
即使你写了 box-shadow，Chrome/Safari 默认仍会叠加系统级 outline（尤其是用 Tab 键聚焦时），导致两圈发光重叠。正确写法是：
- 先写
outline: none—— 禁用默认轮廓 - 再加兼容 fallback：
outline: 5px auto -webkit-focus-ring-color（仅 Safari 识别，且只在键盘聚焦时生效） - 对
input[type="file"]、input[type="checkbox"]等特殊控件，建议单独重置：outline: 1px solid #999，否则它们可能完全失去焦点反馈
transition 动画要同时作用于 border 和 box-shadow
只给 box-shadow 加 transition，而忽略 border-color，会导致聚焦瞬间边框突变、光晕平滑——视觉割裂。推荐统一过渡：
transition: border-color 0.2s, box-shadow 0.2s- 避免用
transition: all，它会意外触发background-color或opacity动画，增加重绘开销 - 移动端要注意：iOS Safari 对
box-shadow的硬件加速支持较弱，模糊值（blur）超过12px可能掉帧
最易被忽略的是：当输入框本身有 border: none 时，仅靠 box-shadow 发光会显得“浮空”。务必搭配 border: 1px solid transparent 占位，保证尺寸稳定和动画锚点一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
