box-shadow被裁剪的根源是overflow:hidden作用于padding box内边缘，阴影绘制在border box外，超出即被裁；需取blur-radius+abs(offset-y)与spread-radius最大值加2–4px余量设padding，或优先改overflow:visible。
box-shadow 被裁剪的根源是 overflow: hidden 作用于 padding box 边界
box-shadow 绘制在元素的 border box 外，而 overflow: hidden 实际裁剪的是 padding box 的内边缘——也就是说，只要阴影落点超出了 padding box 范围，就会被直接砍掉。这不是 bug，是浏览器渲染规范行为。
常见错误是只盯着 blur-radius 看：比如 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，实际阴影最大外延 ≈ 12px + abs(4px) = 16px；若父容器 padding: 8px，底部 8px 仍会被裁。
- 裁剪生效前提是祖先链上存在「
position≠static」且「overflow为hidden/auto/scroll」的层 - 用开发者工具逐层关闭
overflow，比盲目加padding更快定位真凶 -
transform: translateZ(0)、opacity: 0.99、will-change: transform都可能隐式创建新层叠上下文，让原本有效的padding也失效（Safari 尤其敏感）
为什么加 padding 有时管用，有时完全没反应？
padding 能“兜住”阴影，是因为它把阴影的落点挪进了 padding box 区域——但前提是这个区域没被其他规则二次裁剪。
以下情况会让 padding 失效：
- 父容器用了
box-sizing: border-box（默认），加padding会压缩内容区，导致子元素变形或换行，反而让阴影位置偏移 - 父容器同时有
transform或filter，触发独立层叠上下文，在 Firefox/Safari 中可能连padding box都被纳入裁剪范围 - 响应式场景下，固定
padding: 16px在小屏显得过大，在大屏又不够，不如从源头控制overflow
稳妥做法：取 max(blur-radius + abs(offset-y), spread-radius)，再加 2–4px 余量；例如 box-shadow: 0 6px 20px 4px rgba(0,0,0,0.1) → 至少需要 padding: 26px。
Flex/Grid 容器里阴影被切，别只盯子元素
Flex 和 Grid 容器默认不设 overflow，但很多项目会主动加 overflow: hidden 防内容溢出或清浮动——这正是阴影消失的根源。更隐蔽的是：
- Flex 容器若设了
align-items: stretch，又改父级overflow: visible，可能被“吸扁”，把阴影压进边界 - Grid 容器用
grid-gap时，大阴影（如blur-radius > 8px）会侵入 gap 区域，造成“阴影被切开”的错觉——其实只是相邻 item 的阴影在透明间隙里打架 - 卡片本身用了
width: 100%或grid-column: span 2，加padding会挤内容，必须同步设box-sizing: border-box
优先方案：删掉容器的 overflow: hidden，改用 display: flow-root 清浮动，或用 gap 替代 margin 控制间距。
hover 时阴影突然不出现，大概率不是 transition 写错了
写了 :hover { box-shadow: 0 8px 16px rgba(0,0,0,0.15) } 却没反应，90% 情况下不是语法问题，而是：
- 父容器
overflow: hidden没动，hover 后阴影变大，刚好超出原padding范围，被裁得更狠 - 元素自身
z-index过低，hover 时被兄弟元素盖住（尤其当兄弟有position: relative） - 用了
transform: scale(1.02)之类触发新层叠上下文，导致 hover 前后阴影渲染层级不一致 - 默认状态没设
box-shadow: none，transition 无法平滑插值，看起来像“闪一下就没了”
调试建议：临时给父容器加 overflow: visible !important，再看 hover 是否生效；若恢复，说明问题不在 transition，而在裁剪链。
overflow 的第三方组件黑盒，或者嵌套极深、层叠上下文交错的旧项目。这时候算准 padding 只是起点，还得查 computed 样式里 padding box 尺寸是否真被应用，以及 Safari 下 translateZ(0) 是否意外加剧了裁剪。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
