当对 Flex 容器内的子元素（如 .card）设置 box-shadow 时，若将阴影直接加在子元素的后代（如 ）上，因图片被裁剪或溢出隐藏，阴影可能被截断或不可见；应将 box-shadow 应用于具有完整尺寸和边框控制能力的容器（如 .card）本身。
当对 flex 容器内的子元素（如 `.card`）设置 `box-shadow` 时，若将阴影直接加在子元素的后代（如 ``）上，因图片被裁剪或溢出隐藏，阴影可能被截断或不可见；应将 `box-shadow` 应用于具有完整尺寸和边框控制能力的容器（如 `.card`）本身。
在使用 CSS Flex 布局时，一个常见误区是将 box-shadow 错误地施加在被 overflow: hidden 包裹的内部元素（例如 <img>）上。正如你在代码中所做：
.card img {
width: 100%;
height: 100%;
filter: grayscale(100%);
box-shadow: 40px 40px 20px #333; /* ❌ 问题根源：阴影被 .card 的 overflow: hidden 裁剪 */
}
由于 .card 设置了 overflow: hidden 和 border-radius: 10px，而 <img> 是其子元素，所有超出 .card 边界的内容（包括 box-shadow）都会被强制裁剪——即使 flex 布局本身不影响阴影渲染，但父容器的溢出控制会。
✅ 正确做法是：将 box-shadow 移至 .card 元素自身，并确保其具备可渲染阴影的层叠上下文与边界空间：
.card {
width: 32%;
position: relative;
overflow: hidden;
border-radius: 10px;
margin-bottom: 20px;
/* ✅ 阴影应用在容器上，不受内部 overflow 影响 */
box-shadow: 40px 40px 20px rgba(0, 0, 0, 0.3);
}
.card img {
width: 100%;
height: 100%;
object-fit: cover; /* 推荐补充：避免拉伸失真 */
filter: grayscale(100%);
/* ❌ 移除此处的 box-shadow */
}
? 关键注意事项：
-
box-shadow不会触发overflow: hidden的裁剪，仅当它作用于被裁剪容器的子元素时才会被隐藏； - 若需保留圆角阴影效果，建议同时添加
border-radius到.card（你已做到），并确保box-shadow的模糊半径不会因过小而不可见（当前20px合理）； - 如需更精细控制（如仅阴影不随圆角裁剪），可考虑用伪元素模拟阴影，但本例中直接应用到
.card已足够高效； - 补充
object-fit: cover可防止图片宽高比异常导致内容溢出，进一步提升稳定性。
总结：Flex 布局本身完全兼容 box-shadow，问题本质在于阴影层级与 overflow 的交互逻辑。始终优先将视觉修饰（阴影、边框、过渡）赋予布局容器（.card），而非其受限子元素（img），这是构建健壮响应式图廊的基础实践。
