直接设 outline: none 会破坏键盘用户的可访问性，因其移除了 wcag 要求的焦点指示；必须用 :focus-visible 等替代方案提供可控的视觉反馈，兼顾设计与无障碍。
直接设 outline: none 能去掉轮廓线，但会破坏键盘用户的可访问性——这不是“去掉就完事”的事，而是必须用更可控的方式替代它。
为什么只写 outline: none 不行
浏览器加的默认轮廓（比如 Chrome 的蓝色环、Firefox 的虚线框）是为键盘 Tab 导航服务的，属于 WCAG 可访问性基础要求。单纯写 outline: none 后，用键盘操作的人根本不知道当前聚焦在哪，等于把无障碍支持关掉了。
- 部分旧浏览器不识别
outline: 0，写它等于白写 -
outline: none必须配合:focus或:focus-visible提供替代视觉反馈 - 如果项目要过审计（比如政府或金融类网站），裸删 outline 会被直接标为高风险项
:focus 和 :focus-visible 怎么选
两者解决的是不同交互场景下的焦点提示问题：
-
:focus：所有获得焦点的情况都触发（鼠标点、Tab 键、JS 聚焦），适合需要统一反馈的 UI -
:focus-visible：仅在键盘操作时生效，鼠标点击/触屏后不显示轮廓——更适合想保持“干净点击态”又不牺牲可访问性的场景
推荐组合写法：
input {
outline: none;
border: 1px solid #d1d5db;
}
input:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* 鼠标点击时不显示任何轮廓 */
input:focus:not(:focus-visible) {
outline: none;
}
边框和轮廓容易混淆的几个点
很多人以为设了 border: none 就没轮廓了，其实完全不是一回事：
-
border是元素自身的边框，outline是画在元素外层的独立轮廓线，两者互不影响 - 即使
border: none，:focus下仍会出默认 outline，必须单独处理 - iOS Safari 对
outline渲染有 sub-pixel 偏移，有时需加outline-offset: 2px对齐 - 某些 CSS 框架（如 Bootstrap）会给
input加box-shadow模拟 focus 态，得一并覆盖
真正安全的做法不是“消灭轮廓”，而是接管它——用你控制的颜色、宽度、偏移量，让它既符合设计，又不丢掉任何人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
