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