不会。box-shadow: inset 完全在元素 border box 内部绘制，不参与盒模型计算，不影响 width/height、padding、margin，不触发重排，仅作用于渲染层。
box-shadow: inset 会改变元素尺寸吗？
不会。使用 inset 关键字的 box-shadow 完全在元素边界框内部绘制，不占用额外空间，也不触发重排（reflow）。它只影响渲染层，不影响 width/height、padding 或 margin 的计算逻辑。
为什么用 inset 写内阴影却看到“外溢”？
常见错误是混淆了偏移量与模糊/扩展半径的作用。例如：box-shadow: inset 0 0 10px rgba(0,0,0,0.2) 看似居中，但模糊半径会让阴影向四周“渗出”——尤其当元素 border-radius 较大时，边缘可能显得像漏光。真正干净的内阴影需配合负扩展半径收缩范围：
-
inset 0 0 8px -2px rgba(0,0,0,0.15)：模糊 8px，同时用-2px收紧边缘，避免软边穿出圆角 - 若元素有
border，建议设box-sizing: border-box并确认border不参与阴影裁剪 - 不要依赖
inset模拟“凹陷按钮”效果——那需要配合background和border色阶才自然
filter: drop-shadow() 能做内阴影吗？
不能。filter: drop-shadow() 只能生成**外部投影**，且基于元素 alpha 通道轮廓，天生不支持 inset。试图用 transform: scale(-1) 翻转后叠加，会导致坐标系错乱、性能下降，且无法精确对齐。坚持用 box-shadow: inset 是唯一可靠路径。
多层 inset 阴影叠加时要注意什么？
多个 inset 阴影按声明顺序从里向外堆叠（最左边的最先绘制，最靠内），但所有层都严格限制在 border box 内。易踩坑点：
- 第二层
inset 0 0 4px -1px #fff若写在第一层之后，会被第一层遮挡——除非第一层用了透明色或更小的 spread - 避免同时使用正负 spread 值混搭，比如
inset 0 0 6px 2px+inset 0 0 4px -3px，容易因渲染顺序导致视觉断裂 - Chrome 120+ 对多层
inset的抗锯齿处理更激进，若发现边缘发虚，可加backface-visibility: hidden强制硬件加速
box-shadow: inset 0 0 6px -1px rgba(0,0,0,0.08)。复杂需求往往不是加更多参数，而是先检查父容器是否设置了 overflow: hidden ——它会意外裁掉本该可见的内阴影边缘。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
