button:focus { outline: none; } 可消除蓝色边框，但需配合 button::-moz-focus-inner { border: 0; } 兼容 firefox，且应替换为 box-shadow 等焦点指示以保障可访问性。
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有时仍显虚线——它其实来自-moz-focus-inner的 border，需额外重置：button::-moz-focus-inner { border: 0; }
移动端点击还有灰色遮罩或高亮怎么办
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 不合规操作。
真正健壮的做法不是“消灭 outline”，而是“替换 outline”。比如用自定义边框、背景色变化或 box-shadow 来提供同等辨识度。
- 安全替代方案：
button:focus { outline: none; box-shadow: 0 0 0 2px #007bff; } - 更进一步：用
prefers-reduced-motion媒体查询降级动画，避免干扰 - 切记：移除 outline 前，先确认你提供了其他明确的焦点指示方式
Bootstrap 或 Tailwind 里怎么覆盖默认 focus 样式
这些框架通常把 focus 样式封装在 .btn:focus、.btn:active 或 utility class（如 focus:outline-none）里，直接写普通 CSS 很容易被覆盖。
Tailwind 用户建议改用内置开关；Bootstrap 用户则优先查文档是否已提供 shadow-none 或 focus-ring-none 类——硬写 !important 是下策。
- Tailwind v3+：在
tailwind.config.js中设theme.extend.outline: { none: ["2px solid transparent"] }，再用focus:outline-none - Bootstrap 5：直接加
shadow-none并配合focus-ring-none（需启用 focus ring 插件） - 若用 CDN 引入未编译 CSS，可在引入后追加 style 标签，且声明
!important确保层级胜出
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
