点击元素后的蓝框是outline而非border，属浏览器默认焦点指示，关乎无障碍访问；移除时须用outline:none并配替代视觉反馈，或改用focus-visible精准控制。
点击元素后出现的蓝框是outline不是border
浏览器默认会给获得焦点的元素（比如按钮、输入框）加一个蓝色轮廓，这是 outline 的行为，和 border 无关。很多人误以为改 border 就能去掉它，结果白调半天样式——根本没动对地方。
这个蓝框本质是可访问性功能：键盘用户靠它知道当前聚焦在哪。直接粗暴清空可能影响无障碍体验，得看场景权衡。
用outline: none彻底移除焦点轮廓
最常见做法是给目标元素设 outline: none，但必须配合其他视觉反馈，否则键盘用户会“失焦”。
- 只对明确不需要键盘导航的元素用，比如纯装饰性按钮、已用
tabindex="-1"剥离焦点流的组件 - 不能只写在
:hover或:active里——焦点状态是:focus，不写它就无效 - 若用 CSS reset，注意检查是否全局覆盖了
button:focus、a:focus等规则
button:focus {
outline: none;
}
outline-style: none只是禁用样式，不等于禁用outline
outline-style: none 确实能隐藏轮廓，但它只是让轮廓“不可见”，元素依然有 outline-width 和 outline-color 占位。某些旧版 Safari 甚至会因此触发重排。
- 更稳妥的是写全
outline: 0或outline: none，直接切断整个 outline 盒模型 -
outline: 0在部分 IE 下兼容性略好，但现代项目基本不用考虑 - 别用
outline: transparent—— 透明色仍算有效 outline，屏幕阅读器或高对比度模式下可能异常渲染
保留可访问性时的替代方案
真要兼顾可用性和设计一致性，就别消灭 outline，而是重定义它。
- 用
outline-offset微调位置，避免和边框重叠 - 把
outline换成和主题色一致的描边，比如outline: 2px solid #007bff - 配合
:focus-visible仅在键盘聚焦时显示轮廓，鼠标点击自动隐藏（需注意 Safari 当前支持有限）
button:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}
去掉蓝框本身很简单，难的是判断该不该去、什么时候去、去了之后怎么补救。很多项目线上 bug 都源于某处 outline: none 写得太宽泛，结果表单跳转时焦点消失，用户卡在半路。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
