outline 不影响布局，因其绘制在元素外部且不参与盒模型计算；必须设置 outline-style 才可见；不支持圆角和单边控制；聚焦时系统可能强制替换为高对比度黄框，禁用前须提供可访问替代方案。
outline属性为什么不会影响布局
因为 outline 是画在元素“外面”的装饰线，不参与盒模型计算，既不占空间，也不触发重排。它和 border 的根本区别就在这儿——border 是盒模型一部分，加了就会撑开尺寸；outline 则像一层透明胶片上的描边，移动、缩放都不动原有结构。
常见错误现象：outline 看不见？大概率是没设 outline-style（默认为 none），光写 outline-width 或 outline-color 没用。
-
outline必须显式声明outline-style（如solid、dashed）才可见 - 它不支持圆角（
outline-radius不存在）、不支持单边设置（不能只设outline-top） - 聚焦时浏览器自动加的蓝色
outline，本质就是用了这个机制，不是 bug 是设计
怎么让outline和border看起来一样粗细
视觉上对齐要小心：虽然都叫“线宽”，但 outline-width 的渲染位置在元素边缘外侧，而 border-width 在内侧边缘上。如果同时存在，outline 实际会比 border 看起来“偏外一圈”。
使用场景：比如你用 border 做常态边框，又想在 focus 时用 outline 加个高亮，但发现两者错位、粗细不一致。
立即学习“前端免费学习笔记（深入）”；
- 把
outline-width设为和border-width相同值，只是视觉起点不同，接受这点偏差更实际 - 若强求完全重叠，得用
outline-offset往内拉（负值），例如outline-offset: -2px可抵消 2px 的外偏移 -
outline-offset为 0 时，outline紧贴元素边缘外侧；正值往外推，负值往里压（但压太狠可能被裁剪）
focus状态下outline消失的常见原因
不是 outline 被删了，而是被别的样式覆盖或重置了。最典型的是某些 CSS 重置库（如 Normalize.css）或框架（如 Tailwind）默认把 :focus 的 outline 设成 none，只为换用 box-shadow 模拟。
错误现象：tab 切换焦点时看不到轮廓，但检查元素发现 outline 样式明明写了。
- 优先检查是否被
*:focus { outline: none; }或类似规则全局干掉 - Tailwind 用户注意：
focus:outline-none工具类会直接覆盖，得手动加focus:outline-[...]覆盖回去 - 用
!important强行恢复 outline 不推荐；更好的做法是提高选择器权重，或改用outline-color: currentColor动态继承文字色
outline在高对比度模式下的可访问性风险
Windows 高对比度模式（或 macOS 的“增加对比度”）下，系统会强制替换页面所有 outline 为高亮黄框——这是浏览器主动行为，不是你的样式失效。但问题在于：如果你之前用 outline: none 彻底禁用了它，那高对比度用户就彻底失去焦点指示，等于关掉了键盘导航的路标。
容易被忽略的地方：测试常只看普通模式，却漏掉辅助技术真实使用场景。
- 永远别对可聚焦元素（
button、a、带tabindex的div）用outline: none - 真要隐藏默认 outline，必须提供替代方案，比如用
outline: 2px solid transparent+focus-visible配合box-shadow -
:focus-visible是目前最稳妥的渐进增强写法，它只在键盘聚焦时生效，鼠标点击不触发
