表单元素聚焦时的蓝线是浏览器默认outline，专为可访问性设计且不占布局空间；误用border替代会导致重排抖动，正确做法是保留outline并用outline-offset调整或改用box-shadow。
为什么表单元素聚焦时会突然多出一圈蓝线？
那圈蓝线就是浏览器默认加的 outline，不是 border。它只在元素获得焦点（比如用 Tab 键切换或点击 input）时自动出现，目的是帮助键盘用户识别当前操作位置——这是可访问性（a11y）的硬性要求。而 border 是你手动写的、始终存在的结构边框，哪怕元素没被聚焦也会占空间、影响布局。
去掉 outline 后页面“跳动”，问题出在哪？
很多人一上来就给 input:focus 加 outline: none，结果发现：聚焦前后按钮位置微移、卡片高度变化、甚至相邻文字被挤开。这是因为：
-
border会改变元素尺寸（除非用了box-sizing: border-box），加/减border触发重排（reflow） -
outline不占空间，加/减它只重绘（repaint），视觉稳定 - 直接用
border替代outline，等于把“无侵入提示”强行改成“有侵入样式”，布局必然抖动
正确做法是保留 outline 的非侵入性，用 outline-offset 微调距离，或改用 box-shadow 模拟外发光效果：
input:focus {
outline: 2px solid #007bff;
outline-offset: 2px; /* 让轮廓离边框稍远，避免紧贴 */
/* 或者彻底不用 outline，换 box-shadow（不改变布局） */
/* box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25); */
}圆角头像 + outline = 方框光晕？这是设计缺陷
给头像加了 border-radius: 50%，再加 outline，结果轮廓还是方的，像戴了个方形发光罩——因为 outline **完全不支持圆角**，它永远围绕元素的原始矩形边界绘制。
立即学习“前端免费学习笔记（深入）”；
此时必须换方案：
- 用
border：但需确保box-sizing: border-box，否则头像会变大 - 用
box-shadow：支持border-radius继承，且不占空间，最推荐 - 绝对不要用
outline做装饰性外框，它天生不适合这类场景
示例（安全又美观）：
img.avatar {
border-radius: 50%;
box-shadow: 0 0 0 3px #007bff;
}
img.avatar:focus {
box-shadow: 0 0 0 3px #007bff, 0 0 0 6px rgba(0, 123, 191, 0.3);
}outline-color 的 invert 值容易踩坑
outline-color: invert 是默认值，意思是“让浏览器自动反色”，理论上能适配深色/浅色背景。但它在现代浏览器中已基本失效——Chrome/Firefox/Safari 都不再可靠实现反色逻辑，常固定为黑色或白色，导致在深灰背景上根本看不见。
所以别依赖 invert，显式声明颜色：
- 写
outline: 2px solid #007bff，而不是只写outline-style和outline-width - 必须先设
outline-style（如solid），outline-color才生效 - 无障碍测试工具（如 axe）会警告未定义
outline-color的焦点样式
记住一点：border 是盒子的一部分，outline 是画在盒子外面的提示线。该用哪个，不取决于“哪个更好看”，而取决于“要不要参与布局”和“是不是为了焦点反馈”。混淆二者，轻则样式错位，重则损害可访问性。
