box-shadow 不改变 width/height 但会溢出盒模型边界，导致视觉“变大”或触发重排；真正不影响布局的写法是用伪元素绝对定位绘制阴影并设 z-index:-1，或父容器 overflow:hidden 裁切。
box-shadow 为什么会让元素“变大”
它不会真的改变 width 或 height，但阴影会溢出盒模型边界，触发浏览器重排或影响相邻元素——尤其当父容器 overflow: hidden 或设置了固定尺寸时，阴影被裁切，看起来像“撑开”了布局。
用 outline 替代 box-shadow 的适用场景
outline 不占布局空间、不触发重排，适合仅需外围高亮（如焦点态），但缺点明显：不能设圆角、不能多层、不能控制模糊度和偏移。
- 只用于临时视觉反馈（比如
:focus） - 必须配合
outline-offset避免紧贴边框（outline-offset: 2px） - 无法模拟内阴影（
inset）、渐变阴影或半透明效果
真正不影响布局的 box-shadow 写法
核心是让阴影“不参与盒模型计算”，靠父容器隔离溢出 + 子元素自身收缩内容空间。不是改 box-shadow 参数，而是改容器行为。
- 给父容器加
overflow: hidden，阴影被裁掉，布局不受影响（但阴影不完整） - 用伪元素
::before绘制阴影，并设position: absolute+z-index: -1，主体元素保持原始尺寸 - 避免在
display: inline元素上直接用box-shadow，换用inline-block或块级
示例：
div {
position: relative;
}
div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: -1;
}
内阴影 box-shadow: inset 的坑
它确实不向外溢出，但会压住元素自身内容——特别是当 padding 不足时，文字/子元素被阴影“盖住”，误以为是布局错位。
- 务必检查
padding是否 ≥ 阴影最大偏移 + 模糊半径（例如inset 0 2px 8px至少留 10px 内边距） -
inset在border-radius元素上表现正常，但若父容器有overflow: hidden，可能意外裁切内阴影边缘 - 不要对
input等替换元素滥用inset，某些浏览器渲染不一致
box-shadow 的参数来“修复”布局，那不是它的职责。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
