outline-offset 无法实现真正的内边框效果，因其不占布局空间、无圆角、不可填充且行为受限；box-shadow: inset 才是规范支持的可靠方案，可精准模拟内边框并兼容 border-radius。
outline-offset 本身不能实现内边框效果
outline-offset 控制的是 outline（轮廓线）相对于元素边缘的偏移距离，它始终绘制在元素盒模型外部（正偏移）或内部（负偏移），但**不占据布局空间、不响应 pointer-events、且无法单独控制某一边**。最关键的是：当设为负值时，outline 确实会“缩进”到元素内容区，但它仍是单一线条、无圆角、不可填充，和真正的内边框（inset border）语义与行为完全不同。
用 box-shadow 模拟内边框更可靠
真正接近“内边框”的视觉效果，应使用 box-shadow 的内阴影模式：inset。它能紧贴内容区边缘，支持多层、颜色、宽度、圆角，且兼容性好（IE9+）。
常见写法示例：
div {
box-shadow: inset 0 0 0 2px #333;
}
说明：
-
inset表示内阴影 -
0 0是 x/y 偏移，保持居中 -
0是模糊半径（设为 0 得清晰边缘） -
2px是扩展半径——这就是“边框粗细” -
#333是颜色
注意：若元素有 border-radius，box-shadow: inset 会自动跟随圆角；而 outline 永远是直角，且不响应 border-radius。
为什么不用 outline + negative offset？
虽然 outline: 2px solid #333; outline-offset: -2px; 看似把轮廓拉进了内容区，但实际会出现多个问题：
- 在部分浏览器（如 Safari）中，负
outline-offset渲染不稳定，可能被截断或消失 -
outline不受overflow: hidden约束，会溢出父容器，破坏布局预期 - 无法设置不同方向的“边框宽度”，比如只想要上/左有内边框
- 键盘焦点时
outline仍会显示（可被outline: none关掉，但那就同时干掉了可访问性）
需要真正“内嵌式描边”时的替代方案
如果设计要求是类似 Photoshop 的“内描边”（即从内容边缘向内收缩绘制线条），box-shadow: inset 是首选；但若需更高精度（例如避开文字、绕过子元素），就得考虑：
- CSS
clip-path配合伪元素（复杂，性能敏感） - SVG
<clippath></clippath>+<rect></rect>套叠（适合图标类场景） - 绝对定位的伪元素 +
transform: scale()（需手动计算缩放比例，易失真）
绝大多数情况下，box-shadow: inset 已足够——它不是 hack，而是 CSS 规范明确支持的内嵌渲染机制。别为了“outline”这个词绕远路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
