按钮点击后蓝色边框是:focus状态下的默认outline样式，直接设outline:none会损害可访问性；应改用outline:none配合自定义focus样式（如box-shadow或border）来兼顾视觉与无障碍需求。
按钮点击后出现的蓝色高亮框，绝大多数情况下不是
，而是聚焦（focus）时浏览器默认的
样式——尤其在桌面端或键盘操作场景下。直接清掉
能快速消失，但会破坏可访问性。
为什么 outline:none 之后 Tab 键就“看不见焦点”了
因为
真的只是把轮廓删了，没提供任何替代反馈。键盘用户靠 Tab 切换焦点时，完全无法判断当前聚焦在哪个输入框或按钮上。
只写
是危险操作，尤其对表单类页面
必须同步添加视觉替代：比如加
、
或背景色变化
在部分旧 IE 中不生效，
兼容性更稳
别用全局
，它会误伤所有可聚焦元素（包括
、
）
如何安全地重置 outline 并保留可访问性
核心是「隐藏默认 outline，显式定义 focus 态」。例如：
这个组合既移除了突兀的蓝色边框，又提供了清晰、符合 WCAG 的焦点指示
比纯
更柔和，且不会影响布局尺寸
颜色建议用品牌主色或对比度 ≥ 4.5:1 的配色，确保色觉障碍用户也能识别
如果按钮本身有圆角，
会自动跟随，
可能出现直角断裂
outline 和 -webkit-tap-highlight-color 完全是两回事
很多人混淆这两者，结果改来改去都不生效。关键区别：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
触发于
，由键盘 Tab、鼠标点击、JS
引起，桌面/移动端都存在
触发于手指触摸瞬间，仅 WebKit 移动端（iOS Safari、部分 Android WebView），和 focus 无关
给按钮同时加
和
才算真正覆盖全场景
微信 X5 内核可能忽略
，但
一定生效
最易被忽略的点：真机测试时，iOS 上长按按钮触发菜单，或用 VoiceOver 导航，都能立刻暴露你是否真的提供了可用的焦点反馈——光让蓝色框消失不难，难的是让它消失得不牺牲任何人。
-webkit-tap-highlight-coloroutlineoutlineoutline: noneinput:focus { outline: none; }borderbox-shadowoutline: 0outline: none*:focus { outline: none; }textareaselectbutton:focus {
outline: none;
border: 2px solid #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}box-shadowborderbox-shadowborderoutline:focus.focus()-webkit-tap-highlight-coloroutline: none-webkit-tap-highlight-color: transparent-webkit-tap-highlight-coloroutline