父容器 overflow: hidden 是阴影消失的头号原因，因其与非 static position 祖先共同构成裁剪边界，导致不占文档流的 box-shadow 被物理裁切；临时验证可将父级 overflow 改为 visible 观察阴影是否恢复。
父容器 overflow: hidden 是阴影消失的头号原因
只要父元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且其某个祖先节点 position 不是 static，它就自动成为「裁剪边界」——box-shadow 这种不占文档流、只在绘制层渲染的内容，会直接被物理裁掉。这不是 bug，是规范行为。
临时验证方法：打开开发者工具，选中带阴影的元素，把它的任意一层父容器的 overflow 改成 visible，阴影立刻出现 → 就坐实了问题根源。
- 别只盯着直接父级，用开发者工具逐层向上检查
computed样式里的overflow和position - 第三方组件（如模态框、轮播、卡片封装）常默认加
overflow: hidden，你改不了 DOM 也得意识到它在那儿 -
transform、opacity、will-change会隐式创建新层叠上下文，在 Safari 中可能让padding都失效
display: flow-root 比 overflow: hidden 更干净地包裹浮动
老项目常用 overflow: hidden 清除浮动，但它顺手把 box-shadow、下拉菜单、transform 位移内容全裁了。现代解法是用 display: flow-root 替代——它同样触发 BFC，但完全不裁剪任何溢出内容。
注意兼容性：display: flow-root 在 Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 可用；IE11 不支持，必须回退到伪元素法。
- 浮动子元素必须有显式宽度（比如
width: 100%或min-width），否则父容器撑不开，阴影落在可视区域外 - 图片记得加
img { width: 100%; height: auto; }，避免因尺寸未定导致 BFC 高度计算异常 - 别依赖
min-height: 1px这类“技巧”来撑开容器，某些 Android WebView 下它不可靠
加 padding 是预留空间，不是修复 bug
padding 能起作用，是因为阴影绘制在 border box 外，而 overflow: hidden 裁剪的是 padding box 的内边缘。加 padding 是把阴影“挪进”可显示区域，本质是预留物理空间。
但值必须算准：取 abs(v-offset) + blur-radius + spread-radius 三者之和，再加 2–4px 余量。例如 box-shadow: 0 4px 12px 6px rgba(0,0,0,0.15)，至少要 padding: 22px（4 + 12 + 6 = 22）。
- 如果父容器用了
box-sizing: border-box（默认），加padding会压缩内容区，卡片可能被挤变形 - 响应式布局中，固定
padding在小屏过大、大屏又不够，不如优先改overflow - Grid 容器里加
padding可能拉高grid-auto-rows，尤其当行高依赖内容时，建议改用align-items: start+min-height
Tooltip、下拉菜单这类绝对定位内容更难逃裁剪
它们不是子元素，但挂载位置默认在触发元素的父级内。一旦该父级或其任意祖先满足「position ≠ static + overflow: hidden/auto/scroll」，Tooltip 就被切掉——z-index 和 padding 全无效。
Bootstrap 5+ 的标准解法是加 data-bs-container="body"，强制挂载到 下，彻底脱离局部裁剪上下文。
- 别用
data-bs-container=".some-class"，匹配多个元素时 Bootstrap 只取第一个，行为不确定 - 若必须指定容器（如避开
body上的transform），用唯一 ID：data-bs-container="#app"，并确认该节点自身没裁剪属性 - React 项目可用
createPortal，Vue 用teleport，手动移到body并 JS 计算位置
overflow、阴影参数合法且外延可算、绝对定位类内容已脱离裁剪上下文链。漏掉任意一个，阴影都可能“凭空消失”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
