box-shadow被overflow:hidden截断本质是裁剪边界问题，阴影绘制在padding box内边缘之外即被裁，解决关键是让阴影落点进入可显示区域；padding值应≥|offset-y|+blur-radius+spread-radius再加2–4px余量。
box-shadow 被 overflow: hidden 截断，本质是裁剪边界问题
不是阴影“跑出去了”，而是它压根就画在父容器的 padding box 内边缘之外——而 overflow: hidden 的裁剪线，就卡在这条边上。阴影从不参与布局，浏览器也根本不管它有没有用，只要像素落在裁剪线外，一刀切。
常见错误现象：box-shadow: 0 4px 12px rgba(0,0,0,0.15) 加在卡片上，父容器一设 overflow: hidden，底部阴影立刻消失；用开发者工具看，阴影区域明明存在，只是被“隐形墙”挡住了。
真正要解决的，不是让阴影“缩回来”，而是让它的落点合法地落在可显示区域内。
padding 缓冲区怎么算才不白加
只看 blur-radius 是最大误区。实际阴影最大外延 ≈ abs(offset-y) + blur-radius + spread-radius 三者之和，再加 2–4px 余量才稳妥。
-
box-shadow: 0 4px 12px rgba(0,0,0,0.15)→ 至少padding: 16px（4 + 12 = 16） -
box-shadow: 0 0 6px 4px #000→spread-radius是 4px，padding: 4px才够，否则边缘仍贴边 - 若只担心底部截断，可单设
padding-bottom: 16px；四边都有阴影，就得padding: 16px或分别设置
注意：padding 生效的前提是父容器没因 transform、opacity、will-change 等隐式创建新层叠上下文——Safari 尤其敏感，加了 padding 还不显示？先检查 computed 样式里 padding-box 尺寸是否真被应用。
Flex/Grid 容器里加 padding 的副作用
在 display: flex 或 display: grid 的父容器上直接加 padding，会压缩子项可用空间，可能触发换行、拉高行高，或撑开轨道——尤其当使用 grid-auto-rows: minmax(0, 1fr) 或 align-items: stretch 时。
- 卡片用了
width: 100%或grid-column: span 2？加padding会挤内容，必须同步设box-sizing: border-box - Grid 中优先用
align-items: start+min-height替代加padding，避免干扰轨道尺寸计算 - Flex 中改用
gap控制间距，清空卡片自身的margin——gap不参与盒模型，完全绕过裁剪逻辑
真正卡住人的，往往不是 padding 加多少
而是忘了查 DOM 链路上所有祖先：只要某层同时满足 position ≠ static 且 overflow: hidden/auto/scroll，它就成为包含块兼裁剪边界。用开发者工具逐层关闭 overflow 看哪一层生效，比盲目加 padding 更快定位问题点。
另外，display: flow-root 是比 overflow: hidden 更干净的解法——它能撑高塌陷容器，又不附带裁剪行为；但注意它和 position: absolute 不能共存于同一元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
