直接写 button:focus { outline: none; } 可去除蓝色轮廓，但需配合 :active、处理 !important 覆盖、::-moz-focus-inner、box-shadow、-webkit-tap-highlight-color，并优先保障键盘可访问性。
button:focus 时 outline 蓝色边框怎么消失
直接写 button:focus { outline: none; } 就能去掉点击后残留的蓝色轮廓，但要注意：只写 button { outline: none; } 是无效的——因为浏览器默认只在聚焦（:focus）状态下渲染 outline，非聚焦时本就没有 outline 可“去掉”。
常见错误是漏掉伪类，导致样式不生效；更隐蔽的问题是，某些 Bootstrap 或 Ant Design 类库会用 !important 覆盖你的 outline: none，这时得加权重或补 !important。
- 必须搭配
:focus、:active或两者都写，推荐写全：button:focus, button:active { outline: none; } - 如果按钮带
href或用role="button"模拟，还要额外处理a:focus和对应role元素 - Firefox 下仅靠
outline: none有时仍显虚线——它其实来自button::-moz-focus-inner { border: 0; }，需额外重置
Bootstrap 按钮的蓝色边框和 box-shadow 怎么一起清
Bootstrap 5+ 主要用 box-shadow 实现那个蓝色光晕，outline 反而常被设为透明或隐藏——所以只清 outline: none 往往没用。
真正有效的写法是同时清除两部分，并确保优先级足够：
.btn:focus { outline: none !important; box-shadow: none !important; }- 旧版 Bootstrap 还可能触发
.btn:active:focus或.btn.active:focus，建议一并覆盖 - 某些主题下聚焦时边框变蓝（比如
btn-outline-primary），还得加border-color: transparent !important - 这段 CSS 必须放在自定义样式表末尾，且加载顺序要在 Bootstrap CSS 之后
移动端点击后的灰色遮罩/高亮怎么关
iOS Safari 和部分安卓 WebView 在点击可交互元素时，会叠加一层半透明高亮（不是 outline），这是 -webkit-tap-highlight-color 控制的。这个属性和 outline 无关，不加它，outline: none 再全也没用。
- 禁用点击高亮：
button { -webkit-tap-highlight-color: transparent; } - 若要兼容老版 iOS，可写成：
-webkit-tap-highlight-color: rgba(0,0,0,0); - 该属性只在真实触摸设备上生效，桌面 Chrome 开发者工具模拟 touch 模式才能预览效果
- 别全局滥用，只对明确不需要点击反馈的按钮加即可
为什么去掉 outline 后键盘用户就懵了
键盘用户按 Tab 切换焦点时，全靠 outline 提供视觉定位。直接 outline: none 会切断这部分路径，属于 WCAG 不合规操作。
真正安全的做法不是“删”，而是“换”：
- 用
border替代：button:focus { border: 2px solid #0d6efd; } - 用柔和
box-shadow替代：box-shadow: 0 0 0 0.2rem rgba(13, 110, 237, 0.25); - 颜色必须满足对比度 ≥ 4.5:1，且不能依赖纯色觉区分（比如只靠红/绿）
- 圆角按钮用
box-shadow更稳妥，border可能在直角处断裂
最易被忽略的是：所有可聚焦元素（input、select、自定义 radio 的 label）都要统一处理，不能只盯着 button。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
