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 参数，而是改容器行为。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给父容器加 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 的参数来“修复”布局，那不是它的职责。