overflow: hidden 直接砍掉 box-shadow，因阴影绘制在 padding box 外，而该属性裁剪边界恰为 padding box 内边缘；需设 overflow: visible 或按 blur/spread 半径预留 padding。
overflow: hidden 为什么直接砍掉 box-shadow
因为 box-shadow 是绘制在元素「padding box」之外的视觉层，而 overflow: hidden 的裁剪边界就是 padding box 内边缘——阴影刚画出来就被父容器一刀切掉。这不是渲染失败，是浏览器按规范严格执行：不占布局空间的内容，超出即弃。
padding 预留空间不是万能解，得看阴影尺寸
加 padding 是最直觉、兼容性最好的办法，但必须和阴影参数对齐，否则白加：
- 若
box-shadow: 0 4px 12px rgba(0,0,0,0.1)，扩散半径（spread-radius）为 0，主要靠模糊半径（12px）向外晕染，建议至少加padding: 12px，上下左右都留足 - 若用了正 spread-radius，比如
box-shadow: 0 0 6px 4px #000，那 4px 是硬性外扩距离，padding至少 ≥ 4px，否则阴影边缘仍会贴边甚至被裁 - 只加单侧
padding（如仅padding-bottom: 8px）只防底部截断；卡片四边都有阴影，就得四边 padding 或用padding: 8px
padding 太大会撑开 grid 轨道，怎么不破坏布局
Grid 容器里加 padding 会让子项可用空间变小，可能触发自动行高拉伸或内容换行——尤其当卡片高度依赖 grid-auto-rows 时：
- 用
box-sizing: border-box确保padding不额外增加总宽高（但 grid track 尺寸仍以 content box 为基准） - 更稳妥的是改用
grid-gap替代部分 padding：比如原想靠padding: 12px防阴影裁剪，可设grid-gap: 12px+ 卡片自身margin: -12px，让间隙“借”来当阴影落脚地 - 若布局严格禁止任何空白，就别硬撑
padding，转用transform: translateZ(0)触发新层叠上下文——但 Safari 对此支持不稳定，上线前必须实机测
文字本身被 overflow: hidden 截成半截，和阴影是两回事
如果连字母 g、y 的下伸部分（descender）都被切掉，说明问题出在文本容器高度不足，不是阴影被裁。这时候加 padding 没用，得动 line-height 或 min-height：
-
line-height: 1.5或更高，确保每行有足够垂直余量容纳 descender - 给文字容器加
padding-bottom: 4px（非为了阴影，而是专为 descender 留白） - 避免用固定
height限制文本容器，优先用min-height+max-height组合
overflow: hidden 控制内容溢出，又要让阴影完整可见——这时候 padding 只是权宜之计，得结合层叠上下文、伪元素重绘或 DOM 结构调整来解。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
