应保留表单元素焦点指示，用: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， 有上下 margin。这不是“边框”，但常被误认为“默认边框”问题。
- 重置范围建议限制在必要元素，避免影响语义化布局（如
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 却没补上等效反馈。
