box-shadow 在 grid-item 中不显示，主因是父容器 overflow: hidden 裁剪阴影；偏移异常源于 transform 或对齐属性影响渲染坐标系；重叠难控应优先用 grid-row/column 分层而非 z-index；大模糊阴影性能问题多由 filter 干扰引发。
grid-item 上 box-shadow 不显示？先检查父容器 overflow
Grid 容器默认可能裁剪子项的阴影，尤其当 overflow 为 hidden 或 auto 时——阴影被直接切掉，不是样式没生效，是被“藏”了。
- 确认父级
grid容器（即设置display: grid的元素）没有overflow: hidden；临时改成overflow: visible测试是否出现阴影 - 如果必须保留滚动或裁剪，改用
overflow: clip（现代浏览器支持更好，且不裁剪 box-shadow） - 避免在 grid 容器上设
border-radius同时配overflow: hidden，这会双重裁剪阴影
box-shadow 在 grid-item 中偏移异常？注意 transform 和 justify/align 影响
Grid 的对齐属性（如 justify-self、align-self）和 item 自身的 transform 会改变渲染层叠顺序与坐标系，导致阴影位置“看起来偏了”。
-
box-shadow始终相对于元素的 border box 渲染，但若 item 被transform: translate()移动，阴影也跟着动——这是正常行为，不是 bug - 如果用了
justify-self: center却发现阴影只在右侧有，大概率是 item 内容实际宽度小于网格轨道，阴影从内容盒边缘出发，而非轨道中心 - 想让阴影以网格单元格为中心，优先用 padding 扩展 item 内容区域，而不是依赖对齐属性“挪动”它
多个 grid-item 阴影重叠难控制？别靠 z-index，用 grid-row / grid-column 显式分层
Grid 中 z-index 对同级 item 生效有限，尤其当它们共享同一网格区域时；阴影重叠混乱，本质是绘制顺序没被显式定义。
- 给需要前置的 item 设置更高
z-index是可行的，但前提是它们不在同一grid-area且未被place-items等全局属性压制 - 更可靠的方式：用
grid-row和grid-column让关键 item 占据独立轨道，天然形成层叠分离 - 阴影本身不触发新层叠上下文，除非 item 有
position: relative+z-index，或isolation: isolate；别指望纯box-shadow改变堆叠顺序
阴影模糊大时性能掉帧？限制 filter 与 backdrop-filter 干扰
大范围 box-shadow（尤其是高 blur-radius）本身开销不大，但一旦父容器或兄弟元素用了 filter（如 blur()）或 backdrop-filter，整个 grid 区域可能被强制进合成层，GPU 渲染压力陡增。
- 用 Chrome DevTools 的 “Rendering” 面板勾选 “Layer Borders”，看 grid-item 是否意外生成大量 Paint Layers
- 避免在 grid 容器上同时使用
box-shadow和filter: drop-shadow()——后者是 SVG 渲染路径，和前者机制不同，叠加反而更慢 - 真要大阴影又保性能：用伪元素
::after绘制一个绝对定位的半透明div模拟阴影，可控性更强，且不触发父级重绘扩散
box-shadow 实际解析值和元素的 rendered bounds。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
