::before不能直接当内描边用，因为它是生成内容而非边框绘制，需手动控制尺寸、定位与层级，否则易盖文字、错位或重排；最稳方案是box-shadow: inset。
为什么 ::before 不能直接当内描边用
因为 ::before 是生成内容，不是绘制边框；它默认占据文档流位置（即使 position: absolute 也要靠父容器定位），且没有“内边距偏移”语义。真要模拟内描边，必须手动控制尺寸和层级，否则容易盖住文字、错位或触发重排。
常见错误现象：box-sizing: border-box 下仍看到内容被撑开、圆角不跟手、响应式时描边突然消失——本质是没把 ::before 的宽高/定位/缩放跟父元素严格对齐。
- 必须设
content: ""，否则伪元素不渲染 - 父元素需有
position: relative，否则absolute伪元素会相对于最近定位祖先偏移 - 描边宽度实际由
width/height+transform: scale()或inset控制，不能靠border - 圆角要同步写在伪元素上，且
border-radius值需与父元素一致，否则视觉断裂
::before 内描边的最小可行代码结构
核心思路：伪元素铺满父容器，再反向缩放或 inset 缩小，留出“描边空隙”。比用 outline 或多层嵌套更可控，且不干扰布局。
.inner-stroke {
position: relative;
}
.inner-stroke::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border-radius: 8px; /* 必须和父元素一致 */
box-shadow: inset 0 0 0 2px #333; /* 最简方案：用 inset shadow 模拟 */
}注意：box-shadow: inset 是最稳的选择——它不占空间、支持圆角、无缩放失真。如果非要用 ::before 元素本身做描边（比如要加渐变或动画），就得用 transform: scale(0.96) 配合 overflow: hidden，但此时 2px 描边对应 scale 约 0.96（取决于原始尺寸），需要计算。
立即学习“前端免费学习笔记（深入）”；
用 inset 替代 transform 更可靠
inset 是 CSS Logical Properties 中的定位属性，等价于 top/right/bottom/left 的简写，但它支持百分比和 calc，且不受 transform 变形影响，缩放时不会糊。
- 描边宽 2px →
inset: 2px，即四边各缩进 2px，中间区域就是“内容区” - 要实现真正内描边（描边在内容内侧），伪元素应比父元素小一圈：
inset: 2px+border-radius: calc(8px - 2px) - Firefox 对
inset支持良好，Chrome 102+、Safari 15.4+ 也已支持；老版本回退用top/left/width/height - 避免用
margin或padding调整伪元素，它不属于布局盒，改这些没效果
哪些场景下别硬套 ::before 内描边
不是所有“看起来像内描边”的需求都适合这个方案。关键看描边是否需响应内容变化、是否要交互反馈、是否跨组件复用。
- 按钮文字动态增减时，
::before描边若依赖固定inset，文字撑大后描边会露馅——此时该用background-clip: padding-box配合双层背景 - 需要 hover 时描边变色或加动效？
box-shadow: inset支持 transition，但transform: scale()在低帧率设备上易卡顿 - SSR 或服务端渲染页面中，伪元素可能因 JS 注入时机问题闪一下——优先考虑纯 CSS 属性方案
- 描边要带虚线或点状？
box-shadow不支持border-style，得切图或用mask，复杂度陡增
真正难的从来不是画出那条线，而是让这条线在字体缩放、暗色模式切换、缩放 125%、甚至 Windows High Contrast Mode 下都不破相。这时候，inset 和 box-shadow: inset 的组合，比任何 fancy 的伪元素变换都管用。
