outline不能真正内缩边框，因其不占布局空间、不支持border-radius、无法响应尺寸变化且无box-sizing控制；所谓内缩实为负offset造成的视觉错觉，遇圆角或overflow:hidden即露馅。
outline 为什么不能真正“内缩”边框
因为 outline 本身不占据布局空间，也不支持 border-radius 同步、无法响应元素尺寸变化，更不能像 border 那样通过 box-sizing 控制内外尺寸关系。它只是画在元素“外面”的描边，所谓“内缩”其实是视觉错觉——靠负 outline-offset 把描边往里拉，但一旦元素有圆角或背景色，立刻露馅。
常见错误现象：outline: 2px solid #007bff; outline-offset: -2px; 看似贴着内容边缘，但遇到 border-radius: 4px 时，outline 仍是直角矩形，和圆角边框明显错位；或者父容器 overflow: hidden 时，负 offset 的 outline 被直接裁掉。
用 box-shadow 模拟内边框最稳
比 outline 更可靠：支持圆角继承、不破坏文档流、可多层叠加、兼容性好（IE10+）。关键在于用单侧阴影 + inset 实现“向内压”的效果。
使用场景：需要精确控制内边距感的卡片、输入框聚焦态、按钮激活边框等。
-
box-shadow: inset 0 0 0 2px #007bff;—— 最简内边框，宽度由最后数值决定 - 要带“内边距间隙”，比如让边框离内容 1px：用
inset 0 0 0 2px #007bff, inset 0 0 0 3px transparent - 和真实
border并存时，注意box-shadow绘制层级在 border 之上，若需压住 border，得靠 z-index 配合伪元素
伪元素 + transform 是唯一真·内缩方案
当必须严格对齐 content-box 内边缘（比如实现像素级对齐的调试边框），只能用 ::before 或 ::after 绘制一层绝对定位的框，再用 transform: scale() 或 top/left/width/height 手动缩放。
性能影响：伪元素会触发重排（尤其是用 top/left 动态计算时），scale 方案更轻量但可能模糊（非整数缩放）。
实操建议：
- 给目标元素设
position: relative - 伪元素设
content: ""、position: absolute、inset: 1px（或top: 1px; right: 1px; bottom: 1px; left: 1px） - 宽度控制用
width: calc(100% - 2px); height: calc(100% - 2px);更稳妥，避免 transform 模糊 - 务必加
pointer-events: none，否则会拦截鼠标事件
别忽略 outline 的不可访问性风险
很多 UI 库用 outline: none 去掉默认焦点框，再用 box-shadow 替代——这本身没问题，但若只在 :hover 加，而没配 :focus，键盘用户就彻底失去焦点指示。
容易踩的坑：
- 用
outline-offset: -2px后发现 macOS VoiceOver 不识别该 outline 为有效焦点轮廓 - 伪元素方案若没加
outline: 2px solid transparent到:focus 状态，屏幕阅读器可能跳过该元素 - CSS 中写
*:focus { outline: none }是反模式，应只针对具体组件重置
复杂点在于：视觉“内缩”和可访问性“可感知”常常冲突——越往里缩，越难被看到；越显眼，又越不像内边框。得在 box-shadow 的扩散值、颜色对比度、动画反馈之间反复调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
