box-shadow 替代 border 不撑大尺寸因其不参与盒模型计算；用 0 0 0 2px #ccc 可实现无占位边框；但无法响应交互、不支持虚线、不打印、不随 border-radius 过渡，且 overflow: hidden 会裁切阴影。
box-shadow 替代 border 为什么能避免撑大尺寸？
因为 box-shadow 完全不参与盒模型计算——它只在绘制阶段叠加一层视觉效果，不影响 width、height、getBoundingClientRect() 或父容器高度。而默认的 border 在 box-sizing: content-box 下会直接加到总尺寸上，比如 width: 100px; border: 2px solid #000; 实际占宽 104px。
怎么写一个不占位的“边框”效果？
用 box-shadow 的无偏移、零模糊、正扩展值实现：
.card {
width: 200px;
height: 120px;
background: #fff;
/* 替代 2px 实线边框 */
box-shadow: 0 0 0 2px #ccc;
}
- 参数顺序必须是
0 0 0 2px #ccc：x-offset、y-offset、blur-radius 都为 0，spread-radius 为 2px - 不能省略
blur-radius（即使为 0），否则浏览器可能解析失败或行为不一致 - 颜色必须显式声明，不同浏览器对未设 color 的
box-shadow默认处理不同
哪些场景下千万别用 box-shadow 替代 border？
当需要以下任一能力时，box-shadow 就不是合格替代品：
- 响应鼠标交互：如
:hover改边框色、:focus焦点框——box-shadow区域无法触发事件 - 虚线/点线样式：
box-shadow不支持dashed或dotted - 打印输出：多数打印机忽略
box-shadow，边框会消失 - 需要精确控制边框圆角衔接：它不跟随
border-radius的内角过渡逻辑
box-shadow 和 box-sizing 混用的真实作用点
box-sizing 对 box-shadow 没有任何影响，但它会改变阴影的“起点位置”：
-
box-sizing: content-box时，阴影从更靠外的物理边界（border 外侧）开始画 -
box-sizing: border-box时，border 被“挤进” width 内，阴影起点也跟着向内缩，视觉上更紧凑 - 所以推荐组合使用：
box-sizing: border-box控制真实尺寸 +box-shadow做装饰性描边，既保功能又控视觉
真正容易被忽略的是：阴影本身虽不撑尺寸，但若父容器设了 overflow: hidden，它会被裁切——这不是尺寸问题，而是渲染可见性问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
