grid容器overflow:hidden会裁剪卡片阴影，因阴影属绘制边界且被padding box限制；解法有：①负margin抵消、②transform/ will-change触发独立层叠上下文、③伪元素+filter模拟阴影。
为什么 grid 容器的 overflow: hidden 会裁剪卡片阴影
当卡片（.card）设置了 box-shadow，而它的 grid 父容器（比如 .grid-container）同时有 overflow: hidden，阴影就会被直接截断——因为阴影属于元素的「绘制边界」，而 overflow: hidden 会强制裁剪子元素超出 padding box 的所有内容，包括阴影。
不改父级 overflow 的三种实用解法
多数情况下你不能动 overflow: hidden（比如它用于清除浮动、隐藏滚动条或配合动画），这时可从卡片自身入手：
- 给卡片加
margin：用负 margin 抵消阴影被裁的空间，例如margin: -8px（对应box-shadow: 0 4px 12px rgba(0,0,0,0.1)的扩散半径） - 用
transform: translateZ(0)或will-change: transform触发独立层叠上下文，让阴影在新层中绘制，绕过父容器的裁剪限制（注意：仅对部分浏览器稳定，Chrome/Edge 较可靠） - 把阴影换成伪元素绘制：
::before绝对定位 +filter: blur()+opacity，完全脱离 box-shadow 的绘制路径
.card {
position: relative;
}
.card::before {
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
background: currentColor;
z-index: -1;
filter: blur(8px);
opacity: 0.15;
pointer-events: none;
}Grid track sizing 与阴影溢出的隐性冲突
即使没写 overflow: hidden，如果 grid 行/列使用了 grid-template-rows: 1fr 或 minmax(0, 1fr)，且卡片高度含阴影，也可能因轨道尺寸未预留空间导致视觉上「被压扁」。此时阴影虽未被裁剪，但卡片被压缩，阴影显得局促。
Tencent EdgeOne
下载
一项面向腾讯 EdgeOne（边缘安全与加速平台）的综合能力，涵盖边缘加速（DNS、证书、缓存、规则引擎、L4 代理、负载均衡）、边缘安全（DDoS 防护、Web 防护、Bot 管理）、边缘媒体（实时音视频/图像处理）、边缘开发（Edge Functions、EdgeOne Pages）等多方面功能。当用户提及任何与 EdgeOne / EO 相关的配置、运维、查询或故障排查需求时，请启用此项能力。
- 检查是否用了
minmax(0, 1fr)—— 它会让轨道无视子元素的 min-content，建议改用minmax(min-content, 1fr) - 给 grid 容器加
align-items: start，避免卡片被拉伸后阴影变形 - 若卡片需固定高度，优先用
min-height而非height，为阴影留白
真正安全的兜底方案：用 outline 替代 shadow？
outline 不受 overflow 影响，但它无法实现模糊、偏移、多层等效果，只能做单色硬边框。所以它不是替代方案，而是紧急降级手段：
立即学习“前端免费学习笔记（深入）”；
.card {
outline: 2px solid rgba(0,0,0,0.1);
outline-offset: 4px; /* 可模拟轻微外扩 */
}这个技巧只适用于设计允许无模糊、纯线性外边的极简场景。绝大多数卡片阴影问题，还是得回到层叠上下文或伪元素方案里找解法——尤其是当父容器的 overflow 是第三方 UI 库强设、不可覆盖时。
