是的，grid容器设overflow:hidden会必然裁剪box-shadow——因其触发bfc，裁剪边界为padding box内边缘，而阴影绘制在border box外；可用overflow:clip、合理padding或伪元素规避。
Grid 容器设了 overflow: hidden 就一定裁 shadow？
是的，只要 Grid 容器（即 display: grid 的父元素）设置了 overflow: hidden（或 auto、scroll），且它自身或某个祖先元素的 position 不是 static，那么子项的 box-shadow 就会被物理裁掉——不是“没渲染”，是刚画出来就被剪掉了。这不是 Grid 特有行为，而是 BFC（块级格式化上下文）的硬性规则：overflow: hidden 强制触发 BFC，而 BFC 裁剪边界就是 padding box 的内边缘，box-shadow 默认绘制在 border box 外，自然被拦在外面。
overflow: clip 是比 hidden 更安全的替代方案
overflow: clip 在现代浏览器（Chrome 107+、Firefox 111+、Safari 16.4+）中已稳定支持，它能实现和 hidden 相同的内容裁剪效果，但关键区别在于：它不裁 box-shadow。阴影仍可完整外溢，同时避免了 hidden 带来的层叠副作用（比如干扰 position: absolute 子项定位、误切 transform 内容）。
使用时注意：
-
clip不支持滚动条，也不触发 scroll event，纯视觉裁剪 - 若需兼容旧版 Safari 或 Firefox，得回退到伪元素或
padding方案 - 不要和
border-radius同时用在同一个容器上——clip会忽略圆角，导致阴影直角外露
加 padding 看似简单，但值必须算准
给 Grid 容器加 padding 是最常用兜底法，原理是把阴影“落点”挪进 padding box 区域内，从而绕过裁剪。但它不是无脑加，失效主因是值太小或布局干扰：
-
padding至少 ≥abs(v-offset) + blur-radius + spread-radius的最大值，再加 2–4px 余量。例如box-shadow: 0 4px 12px rgba(0,0,0,0.15)→ 至少padding: 16px - Grid 容器本身设了
padding，会压缩子项可用空间，可能触发grid-auto-rows: minmax(0, 1fr)拉高轨道，或让align-items: stretch把卡片撑变形 - 优先用
gap控制卡片间距，而不是靠padding“借空间”；真要加，建议只加padding-bottom和padding-right，避开影响高度计算的上下左右全加
真正难搞的是多层裁剪叠加
实际项目里，阴影消失往往不是单一层的问题。常见组合陷阱：
- Grid 容器设了
overflow: hidden+ 外层 Flex 容器也设了overflow: hidden→ 双重裁剪，加再多padding都没用 - Grid 容器加了
transform: scale(1)或will-change: transform→ 隐式创建新层叠上下文，连padding区都可能被裁（Safari 尤其明显） - 用了
filter: drop-shadow()替代box-shadow→ 它不被overflow裁，但会虚化整个元素（含文字、图片），不是等效替换
调试时别只盯着卡片样式，用 DevTools 逐层检查 computed overflow、transform、will-change 和 contain，哪一层带裁剪属性，就从哪一层动刀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
