outline 不影响布局但不随border-radius变化，需用box-shadow模拟圆角；不支持单边控制或虚实混合；focus时应优先用:focus-visible+box-shadow保障可访问性。
outline 不影响布局，但默认不随圆角变化
outline 确实不会触发重排（reflow），因为它绘制在元素盒模型之外，不参与尺寸计算。这点和 border 本质不同——border 是盒模型的一部分，增减宽度会改变 width/height 或触发 box-sizing 计算。而 outline 只是「描边层」，类似 Photoshop 的外发光。
但要注意：它默认不遵循 border-radius，即使元素有 border-radius: 8px，outline 仍是直角矩形。这不是 bug，是规范行为。
解决办法只有两个：
- 用
outline-offset往内缩一点（比如outline-offset: -2px），再配合足够大的border-radius，视觉上接近圆角（但非精确） - 真正需要圆角 outline 时，放弃
outline，改用box-shadow: 0 0 0 2px currentColor模拟——它支持border-radius，且不占布局空间
outline 无法单独控制某一边，也不能设置虚线+实线混合
如果你习惯写 border-top: 2px dashed #333 或只给底部加边框，outline 直接不支持。它只有四个统一属性：outline-style、outline-width、outline-color、outline-offset，且必须四边同时生效。
立即学习“前端免费学习笔记（深入）”；
常见误用场景：
- 想实现「仅 focus 时底部加一条线」→ 改用
box-shadow: inset 0 -2px 0 #007bff或伪元素::after定位到底部 - 需要虚线 outline + 实线 border 共存 →
border保留实线，outline设为虚线；但注意outline-offset要设为正值（如2px），否则会和border重叠甚至遮挡 - 用
outline: none移除 focus 样式后键盘用户失去焦点提示 → 必须补上可访问的替代方案，比如box-shadow或背景色变化
focus 状态下 outline 的颜色和可访问性冲突
很多团队用 outline: 2px solid #007bff 做 focus 样式，但遇到深色背景或高对比度模式时，颜色可能不可见。浏览器原生 outline 在 Windows 高对比度模式下会被强制替换为系统主题色，而自定义 outline-color 会被忽略。
更稳妥的做法：
- 保留
outline: none，但用:focus-visible+box-shadow控制仅键盘 focus 时显示（避免鼠标点击也触发） - 确保
box-shadow的扩散半径 ≥outline-width，例如box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25)，比原outline: 2px更清晰 - 测试时打开系统「高对比度」设置（Windows）或「Increase contrast」（macOS），观察焦点是否可见
outline 在 flex/grid 子项中可能被裁剪
当父容器设置了 overflow: hidden，而子元素用了负值 outline-offset（比如 -4px），outline 会被截断——因为 outline 绘制区域仍属于该元素的渲染边界，受父容器 overflow 影响。
这和 box-shadow 不同：box-shadow 在 overflow: hidden 下仍能完整显示（除非 clip-path 或 transform 触发新层叠上下文）。
所以实际项目中：
- 避免对
overflow: hidden容器内的元素使用负outline-offset - 如果必须突出 focus 状态，优先用
box-shadow替代，尤其在卡片、菜单、按钮组等常见 flex 容器里 - 检查 DevTools 的「Rendering」面板，勾选「Paint flashing」，看 outline 是否在重绘区外被裁掉
outline: 2px solid #000，在屏幕阅读器用户、Windows 高对比度模式、或嵌套 transform 的卡片里，可能完全失效。这时候换用 box-shadow 不是妥协，而是更可控的选择。 
