outline 不占布局空间，仅作视觉参考；不支持单边、圆角或 box-sizing 计算；适合焦点高亮与盒模型调试，但需注意可访问性及渲染差异。
outline 不影响布局，但别把它当 border 用
outline 确实不占 layout 空间，这是它和 border 最根本的区别——浏览器计算元素尺寸、位置、父容器流式布局时，完全忽略 outline。所以用它标出元素边界、高亮焦点、临时调试盒模型，不会导致页面“跳动”或错位。
但正因如此，outline 不支持单边设置（比如 outline-top 不存在），也不能设圆角（outline-radius 是无效的），更不能像 border 那样参与 box-sizing 计算。想临时加个“虚线框”看 padding 区域？可以；想模拟带圆角的描边效果？不行，得换方案。
-
outline只能整体设置：用outline: 2px dashed #007bff，不能只加左边 - 聚焦时默认 outline 会覆盖内容，若背景色深、文字浅，可能看不清——建议配合
outline-offset往外推，比如outline-offset: 2px - 部分旧版 Safari 对
outline渲染有偏移 bug，调试时若发现 outline 位置“歪了”，先查是否触发了该渲染异常
用 outline 模拟 box-shadow 调试 padding/margin
想看清一个元素的 content + padding 区域？直接加 outline 比改 border 更安全——它不会挤开相邻元素，也不会让父容器重新计算高度。尤其在 flex 或 grid 布局中，加个 outline 就能立刻确认 padding 是否生效、margin 是否被折叠。
对比 box-shadow：后者虽也不占空间，但默认是“外阴影”，且 inset 版本会侵入 content 区域；而 outline 始终紧贴 border edge（或 content edge，取决于 outline-offset），视觉定位更精准。
立即学习“前端免费学习笔记（深入）”；
- 查看 padding 范围：给元素加
outline: 1px solid rgba(255,0,0,0.3)，再配outline-offset: -1px，就能紧贴 border 内侧描一圈 - 查看 margin 外边界：用
outline-offset: 10px，配合浅色 outline，能清晰看到 margin 推开的空间有多大 - 避免用太粗的 outline（如 >3px）做调试——它本身没有内外之分，粗 outline 的中心线才对齐 border edge，容易误判边界
outline 在 focus 状态下的可访问性陷阱
很多团队为“去掉丑陋的默认 focus outline”直接写 outline: none，结果导致键盘用户无法感知当前焦点位置。这不是视觉问题，是可访问性硬伤。
真正该做的是：保留 outline 的功能，只优化它的样式。比如用 outline: 2px solid #007bff 替代浏览器默认的虚线，再加 outline-offset: 2px 避免遮挡文字。这样既满足 WCAG 2.4.7（焦点可见性），又不破坏布局。
- 禁用 outline 前，务必确认已提供等效的焦点指示（例如用
box-shadow+focus-visible） - 不要在全局 CSS 里写
*:focus { outline: none }——这会无差别抹掉所有焦点提示 - Chrome 120+ 支持
:focus-visible伪类，推荐组合使用：button:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }
outline 不是万能的盒模型尺子，content-box 才是基准
outline 的定位基准是元素的 border edge（当 outline-offset 为 0 时），但它本身不参与任何盒模型计算。也就是说，你用 outline 标出的“线”，只是视觉参考线，不是 layout 的真实边界。
真正决定元素尺寸的是 width/height、padding、border 和 box-sizing 的组合。调试时如果只盯着 outline 看，却没打开浏览器开发者工具的“layout”面板核对 computed width/height，很容易误判 margin 折叠或 flex 项收缩的真实原因。
- Chrome DevTools 的“Toggle element outline”快捷键（Ctrl+Shift+C → 右键元素 → “Show outline”）比手写 CSS 更可靠，它会动态跟随 layout 变化
- 遇到 inline 元素 outline 显示异常（比如断开、错位），大概率是 line-height 或 vertical-align 导致基线偏移，outline 仍按 border edge 绘制，但视觉上“不连贯”
- outline 不会响应 transform 缩放，但 border 会——如果你在缩放容器里调试，outline 的像素宽度不变，可能看起来变细了，这不是 bug，是预期行为
