蓝色/黑色轮廓线是浏览器为可聚焦元素添加的默认:focus样式，用于键盘导航时的可访问性提示；移除时须用outline:none配合替代焦点样式，或采用:focus-visible实现键盘可见、鼠标隐藏的平衡方案。

点击按钮后出现的蓝色/黑色轮廓线是什么

那是浏览器对可聚焦元素（比如 <button></button>）添加的默认 :focus 样式，用于辅助访问——键盘 Tab 切换到按钮时，用户需要视觉反馈。它不是 bug，是可访问性特性，但常被误认为“丑”或“多余”。

用 outline: none 直接移除轮廓线

最直接的办法是在按钮上设置 outline: none，但必须配合其他焦点样式，否则会损害可访问性：

• 仅对 :focus 状态设置：button:focus { outline: none; }
• 务必同时提供替代视觉反馈，例如：button:focus { background-color: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); }
• 不要全局写 *:focus { outline: none; } —— 这会抹掉所有焦点提示，违反 WCAG

更安全的方案：只在键盘操作时隐藏轮廓

现代做法是保留鼠标点击时不显示轮廓，但键盘 Tab 触发时仍显示（兼顾体验与可访问性）：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 使用 :focus-visible 伪类：button:focus:not(:focus-visible) { outline: none; }
• 或更推荐（兼容性更好）：button:focus { outline: none; } button:focus-visible { outline: 2px solid #007bff; }
• 注意：Safari 15.4+、Chrome 86+、Firefox 86+ 支持 :focus-visible；旧版需加 postcss-focus-visible 或降级处理

检查是否被其他样式干扰

有时轮廓“看起来没消失”，其实是被其他 CSS 覆盖或混淆了：

立即学习“前端免费学习笔记（深入）”；

• 确认没有 outline: auto 或 outline: -webkit-focus-ring-color 这类遗留写法
• 用浏览器开发者工具检查按钮的 :focus 状态，看 outline 是否真的被覆盖，还是被 box-shadow 或边框遮挡
• 某些 UI 框架（如 Bootstrap）默认重置了 outline，但可能加了 box-shadow 模拟焦点效果——这时要改的是 box-shadow，不是 outline

去掉那根线本身很简单，难的是判断什么时候该留、什么时候该换、什么时候真能删。别只盯着 outline: none 狂按，先看它为什么存在。