应保留表单元素焦点指示，用：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 却没补上等效反馈。