box-shadow 模拟边框不改变盒模型尺寸，因其完全不参与尺寸计算；核心写法为 inset 0 0 0 1px 颜色；多层需扩展值递增；兼容 border-radius；但不支持虚线、不扩大热区、safari 旧版不稳定、无法替代 outline。
box-shadow 模拟边框为什么能保护盒模型尺寸
因为 box-shadow（包括 inset）完全不参与盒模型计算：它不改变元素的 width、height、padding，也不影响 box-sizing 的行为。当你在 Grid 列宽固定为 200px 或 Flex 项目设了 flex-basis: 150px 的场景下，加真实 border 会直接撑开尺寸（除非用 box-sizing: border-box），而 box-shadow: inset 0 0 0 1px #ccc 只是“画上去”的视觉层，底层尺寸纹丝不动。
怎么写才能真正替代 border
核心是用 inset + 零偏移 + 零模糊 + 正扩展值：
-
box-shadow: inset 0 0 0 1px #000→ 等效于border: 1px solid #000，但无盒模型干扰 - 多层内边框？把多个
inset用逗号拼接：box-shadow: inset 0 0 0 1px #333, inset 0 0 0 3px #eee（注意第二层扩展值必须 > 第一层，否则被盖住） - 要圆角兼容？放心，
inset阴影天然跟随border-radius，不像真实border需要额外调参 - 别混用
border和inset box-shadow做“双线效果”，否则外层阴影起点是 border 外边缘，视觉厚度 = border-width + shadow-spread，容易误判
哪些场景下不能只靠 box-shadow
以下情况必须放弃纯 box-shadow 方案：
- 需要虚线、点线、双线等非实色边框样式 →
box-shadow不支持dashed/dotted - 需要响应鼠标悬停热区扩大（比如点击区域需包含边框）→
box-shadow不增加交互 hit area，得靠padding或伪元素扩出可点击区 - 移动端 Safari 13–14.4 中多层
inset渲染不稳定 → 必须降级为伪元素方案（::before+position: absolute+ 负margin扩边） - 需要与 outline 行为一致（如键盘聚焦时绕过边框显示轮廓）→
outline是独立绘制层，box-shadow无法模拟其渲染逻辑
和真实 border 共存时的常见错觉
很多人给已有 border 的元素再加 box-shadow: inset 0 0 0 1px red，结果发现“边框变粗了”或“颜色发灰”。这不是 bug，是叠加逻辑：
- 真实
border占据像素空间，inset阴影从 border 内侧开始绘制，若 border 本身有抗锯齿或半透色，会和阴影混合 - 更隐蔽的问题：当元素有
transform: scale(0.99)或 subpixel rendering 时，inset阴影可能轻微错位，看起来像“虚边” - 调试建议：临时删掉
border，只留box-shadow，确认视觉是否符合预期；再决定是否真要共存
box-shadow 模拟边框最常被忽略的不是语法，而是它对交互热区和可访问性（如 focus ring 重叠）的静默影响——这些地方没有视觉反馈，但用户操作会真实失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
