outline 不占布局空间且总在 border 外层，但不支持圆角和 inset；需用 outline: none 清默认焦点样式并重写以保可访问性；outline-offset 控制间距，box-shadow 是更灵活的替代方案。
outline 不会触发重排，但默认会干扰焦点样式
用 outline 替代 border 加轮廓线，核心优势是它不占布局空间——不会让盒子变大、不影响相邻元素位置。但浏览器会给可聚焦元素（比如 button、a、带 tabindex 的 div）自动加 outline，键盘操作时出现的虚线就是它。直接写 outline: 2px solid red 可能盖不住默认焦点 outline，或者在失焦后还残留。
- 先用
outline: none清掉默认焦点样式，再按需重写（尤其要保留键盘用户的可访问性） - 如果只是视觉装饰，且元素不可聚焦，建议加
outline: 0或outline: none防止意外触发 -
outline不支持圆角（outline-radius不存在），想圆角只能用border或box-shadow
outline-offset 控制轮廓离盒子的距离
outline 默认紧贴边框，不像 border 那样可以靠 padding 或 margin 调整间距。outline-offset 就是干这个的：正数往外推，负数往里缩（可能遮盖内容）。
-
outline-offset: 2px让红色轮廓线离盒子边缘空出 2px -
outline-offset: -1px会让轮廓压进边框内，慎用，容易和内容重叠 - 该属性对
outline-style: none无效；只在有实际轮廓时起作用
outline 和 border 同时存在时的层叠顺序
当一个元素同时设了 border 和 outline，outline 总是画在最外层，不遮挡 border，也不影响 border-radius 渲染。但要注意：如果 outline 太粗 + outline-offset 为负，它可能视觉上“吃掉”一部分 border，而 DOM 尺寸依然不变。
- 检查是否误把
outline当成border来调试——用开发者工具看 computed 样式，outline在 “Outline” 分组下，和border是分开的 - 某些旧版 Safari 对
outline-offset支持不稳定，若需兼容，优先考虑box-shadow: 0 0 0 2px red -
outline不响应transform缩放，放大后可能显得模糊；border和box-shadow更可控
替代方案：box-shadow 模拟轮廓线更灵活
如果需要圆角轮廓、阴影扩散感、或多层轮廓，box-shadow 比 outline 更可靠。单层轮廓写法：box-shadow: 0 0 0 2px red，它也不影响盒模型尺寸。
立即学习“前端免费学习笔记（深入）”；
-
box-shadow: 0 0 0 2px red, 0 0 0 4px blue可实现双层轮廓 - 配合
inset可做内轮廓（outline不支持 inset） - 注意：
box-shadow在overflow: hidden容器里会被裁剪，outline不会
outline: none 却没补键盘焦点样式。只要用户还用 tab 切换，就得确保焦点状态有明确视觉反馈。 
