grid-item 的 box-shadow 被父容器裁剪的根本原因是 grid-container 默认 overflow: hidden 且未创建新层叠上下文，导致不占布局空间的阴影被剪切；解决方法包括设 overflow: visible、加 padding、用 transform 创建新层叠上下文等。
grid-item 的 box-shadow 被父容器裁剪了
根本原因是 grid-container 默认没有溢出处理，而子项的 box-shadow 属于“绘制层”，不占布局空间，一旦超出父容器边界就会被裁掉——不是阴影没渲染，是被默默剪掉了。
常见错误现象：grid-item 靠近容器边缘时，外侧阴影完全消失；用 inspect 看元素盒模型，阴影区域明明存在，但视觉上就是“断了一截”。
- 别给
grid-container加overflow: hidden（这是默认值，会加剧问题） - 改用
overflow: visible—— 但注意：这仅在容器本身没设overflow且没触发 BFC 时才真正生效 - 更稳妥的做法是给容器加一点内边距：
padding: 8px，让阴影有“落脚地” - 如果布局严格不能留白，就用
transform: translateZ(0)或will-change: transform强制创建新层叠上下文，有时能绕过裁剪逻辑（但非标准解法，慎用）
grid-gap 和阴影之间的视觉冲突
grid-gap 是透明间隙，而 box-shadow 是绘制在 item 边框外的像素。当阴影尺寸较大（比如 box-shadow: 0 4px 12px rgba(0,0,0,0.15)），它会侵入 gap 区域，造成阴影“被 gap 切开”的错觉——其实只是相邻 item 的阴影在 gap 里打架。
- 避免用
grid-gap+ 大扩散阴影组合；优先用gap控制间距，阴影只负责“浮起感”，半径控制在4px–6px内较安全 - 若必须大阴影，改用
margin替代gap，并确保 margin 不参与 grid 布局计算（即只对 item 生效，不影响轨道大小） - 注意：设置
margin后，item 实际占用空间变大，可能撑开行高，需配合align-items: start或显式设grid-auto-rows
flex 与 grid 混用时阴影失效的隐藏原因
有些布局把 grid-container 套在 display: flex 的父级里，结果阴影又没了——这不是 grid 的锅，而是 flex 容器默认 align-items: stretch，会拉伸子项高度，导致 grid 容器实际高度被压缩，阴影再次被裁。
立即学习“前端免费学习笔记（深入）”；
- 检查父级是否为 flex，并确认其
align-items值；改成flex-start或flex-end可释放高度 - 给 grid 容器加
min-height: min-content，防止被 flex “吸扁” - Chrome 中可用
contain: layout paint隔离绘制，但 Safari 支持弱，不建议作为通用方案
阴影层级被其他 grid-item 盖住
CSS Grid 中，item 的层叠顺序默认按 DOM 顺序，后出现的 item 会盖住前面的——如果带阴影的 item 在 HTML 里靠前，它的阴影很可能被后面无阴影的 item “吃掉”。
- 不要依赖 z-index 在 grid 中强行提层，容易和 grid 自动层叠逻辑冲突
- 把需要突出阴影的 item 放在 HTML 最后（DOM 顺序即绘制顺序）
- 或统一给所有 item 加
z-index: 0，再单独给目标 item 设z-index: 1，确保层级可控 - 注意：
z-index只对定位元素有效，所以得加position: relative（哪怕只是空声明）
真正麻烦的是嵌套 grid 或与其他定位元素交叠的场景——此时阴影是否可见，取决于整个层叠上下文的构建顺序，不是单加 padding 就能解决的。
