应保留表单元素焦点指示，用:focus-visible替换:focus并设置可访问的outline样式；a标签虚线框同理处理；重置margin/padding需避免*通配符；视觉“边框”可能源于border或box-shadow而非outline。

input、textarea、button 等表单元素的默认 outline 边框怎么去掉

浏览器对聚焦的表单控件（如 、、）会自动添加 outline，这是可访问性必需的视觉反馈，不能直接“取消”，但可以安全地重置或替换。盲目设 outline: none 会损害键盘用户操作体验。

• 必须保留焦点指示——可用 outline: 2px solid #007bff 替换默认样式
• 仅在明确提供替代焦点样式（如 box-shadow 或背景色变化）后，才可移除原 outline
• 不要只针对 :focus 移除，而忽略 :focus-visible ——现代推荐用 :focus-visible 精准控制

input:focus,
textarea:focus,
button:focus {
  outline: none;
}
input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

a 标签点击后的虚线框（Firefox/IE）怎么隐藏

老版本 Firefox 和 IE 在 点击后会残留 outline，现代 Chrome/Edge 默认已优化，但兼容旧环境仍需处理。

• 该虚线框本质仍是 outline，不是 border
• 不能只写 a:focus { outline: none }，否则破坏键盘导航
• 更稳妥做法是统一用 :focus-visible 控制，或为 单独加可访问的焦点样式

a:focus {
  outline: none;
}
a:focus-visible {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}

所有元素默认 margin/padding 怎么批量重置

HTML5 本身不定义全局边距，但浏览器有默认样式表（user agent stylesheet），比如 有 margin: 8px，

• 重置范围建议限制在必要元素，避免影响语义化布局（如 blockquote 的缩进）
• 不要用 * { margin: 0; padding: 0 } —— 它重置表单控件内边距，导致文字贴边、按钮塌陷
• 推荐用 html, body { margin: 0; padding: 0 } + 单独重置标题/列表/段落

html,
body {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, blockquote {
  margin: 0;
  padding: 0;
}

为什么加了 outline: none 还有边框？可能是 border 或 box-shadow

开发者常把视觉上的“边框”全归为 outline，实际可能是 border、box-shadow、甚至 SVG 的 stroke。尤其现代框架（如 Bootstrap、Tailwind）默认给 input 加了 border 或 ring 类。

• 先用浏览器 DevTools 检查元素，看高亮区域属于哪一层（Layout → Box Model）
• border 需单独设 border: none 或

  

  border-width: 0
• Tailwind 的 ring 是 box-shadow，要配 focus:ring-0
• 某些 UI 库（如 Ant Design）用伪元素模拟 focus 边框，得查对应类名覆盖

input {
  border: none;
  box-shadow: none;
}
input:focus {
  border: 1px solid #ccc;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

真正麻烦的不是怎么去掉，而是去掉之后谁来告诉键盘用户“当前聚焦在哪”。很多 bug 来自删了 outline 却没补上等效反馈。