outline是浏览器为键盘导航用户强制添加的焦点指示器，独立于border存在；只写border:none无法移除它，必须显式设置outline:none或在:focus中重定义为可访问的替代样式，同时配合-appearance:none清除原生渲染残留。
button 的 outline 是什么，为什么不能只写 border: none
很多开发者以为改了 border 就等于去掉了“边框”，结果点击按钮后仍出现一圈蓝/黄轮廓——那不是 border，是 outline。它是浏览器为键盘导航用户（比如 Tab 键切换焦点）强制添加的焦点指示器，独立于边框存在，且默认不响应 border 设置。
只加 border: none 完全不影响 outline；若同时忽略 outline 和 appearance，按钮在不同浏览器中仍可能残留原生样式（如 Safari 的内发光、Firefox 的灰色描边）。
-
outline不占布局空间，但必须显式声明才能控制其表现 - 直接写
outline: none会破坏可访问性，尤其对依赖键盘操作的用户 -
-webkit-appearance: none和-moz-appearance: none是清除原生控件外观的关键，缺一不可
如何安全地自定义 focus 状态下的轮廓线
可访问性要求焦点必须可见，所以不应删除 outline，而应替换为更可控、对比度更高的样式。常见做法是用 outline 模拟细边框，同时保持尺寸稳定。
- 基础重置：
outline: none只用于初始清除，后续必须在:focus中重新定义 - 推荐写法：
outline: 2px solid #007bff+outline-offset: 0，避免默认偏移导致线条“漂”在按钮外 - 若需与 border 风格统一，可用
box-shadow: 0 0 0 2px rgba(0,123,255,0.3)替代，更易控制虚实/模糊 - 慎用
outline-style: dashed或dotted：部分屏幕阅读器对非实线 outline 支持不稳定
appearance 属性漏写会导致哪些视觉残留
Chrome/Safari/Firefox 对 <button></button> 有各自的原生渲染逻辑，比如 Safari 默认加一层内阴影，Firefox 在 focus 时叠加高亮色边。这些都无法靠 border 或 outline 覆盖，必须通过 appearance 彻底剥离。
- 必须同时写三行：
-webkit-appearance: none、-moz-appearance: none、appearance: none - 漏掉
-webkit-appearance：Safari 下按钮仍有轻微圆角和内发光 - 漏掉
-moz-appearance：Firefox 可能保留灰色渐变背景或 focus 时的蓝色描边 - 仅写标准
appearance: none：在旧版 Edge 或 Android WebView 中无效
细线轮廓的两种可靠实现方式对比
如果目标是“1px 细线感”，不要只依赖 border: 1px solid——它在缩放、高 DPI 屏幕下可能显示为 1.5px 或模糊。更稳妥的是用 box-shadow 模拟，或用 outline 配合固定像素值。
-
border: 1px solid #ccc：简单直接，但缩放 125% 时可能变粗；适合后台管理类项目，对精度要求不高 -
box-shadow: 0 0 0 1px rgba(0,0,0,0.1)：物理像素更稳定，支持透明度控制，且不触发重排；hover 时可改为box-shadow: 0 0 0 1px #28a745 - 二者都需配合
background: transparent和明确的padding，否则细线会被背景“吃掉”
真正麻烦的不是怎么画一条线，而是让这条线在所有焦点状态（鼠标 click、Tab 切换、屏幕阅读器触发）下都一致出现，且不干扰布局——这需要 outline、appearance、box-shadow 三者协同，少一个环节就可能露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
