当对 Flex 容器（如 .gallary）内的子项（如 .card）应用 box-shadow 时，若将阴影直接写在子元素的子元素（如 .card img）上，阴影可能被裁剪或不可见；正确做法是将 box-shadow 应用于具有明确尺寸和 overflow: hidden 的父容器（如 .card）本身。
当对 flex 布局中的卡片元素应用 `box-shadow` 时，若将阴影直接写在子元素的子元素（如 `.card img`）上，阴影可能被裁剪或不可见；正确做法是将 `box-shadow` 应用于具有明确尺寸和 `overflow: hidden` 的父容器（如 `.card`）本身。
在 Flex 布局中，box-shadow “消失”并非 Flex 本身禁用阴影，而是由于阴影被父级的 overflow: hidden 裁剪，或错误地施加在了被限制尺寸/溢出的子元素上。
在你的代码中，.card 设置了 overflow: hidden 和 border-radius: 10px，而 box-shadow 却写在了其子元素 .card img 上：
.card img {
width: 100%;
height: 100%;
filter: grayscale(100%);
box-shadow: 40px 40px 20px #333; /* ❌ 错误位置：img 被 .card 的 overflow: hidden 裁剪 */
}
由于 .card 具有 overflow: hidden，且 img 完全填满 .card，任何超出 img 自身边界的阴影（尤其是大偏移量如 40px 40px）都会被 .card 的边界截断，导致视觉上“阴影消失”。
✅ 正确解法：将 box-shadow 移至 .card 元素自身，并确保其具备可渲染阴影的条件（如非 overflow: hidden 或预留足够外边距空间）。但注意——.card 已设 overflow: hidden，因此需保留该属性以实现圆角裁剪图片，同时将阴影加在其上层（现代浏览器支持对 overflow: hidden 元素应用 box-shadow，阴影绘制在元素框之外，不受 overflow 影响）。
以下是优化后的关键 CSS 片段：
.card {
width: 32%;
position: relative;
overflow: hidden; /* ✅ 保留，用于裁剪图片圆角 */
border-radius: 10px; /* ✅ 保留 */
margin-bottom: 20px;
box-shadow: 40px 40px 20px rgba(0, 0, 0, 0.3); /* ✅ 正确：阴影作用于 .card 本身 */
}
.card img {
width: 100%;
height: 100%;
object-fit: cover; /* ✅ 推荐：避免拉伸变形 */
filter: grayscale(100%);
/* ❌ 移除此处的 box-shadow */
}
⚠️ 注意事项：
-
box-shadow不受overflow: hidden阻挡（它绘制在元素盒模型的外部），因此可安全加在.card上； - 若仍不可见，请检查是否被其他元素（如父容器
.gallary）的overflow或z-index层叠遮盖； - 大偏移阴影（如
40px 40px）在小卡片上可能超出视口，建议搭配margin或使用更合理的值（如0 8px 16px rgba(0,0,0,0.15)）提升可读性与响应性； - 使用
rgba()替代纯色（如#333）可增强透明度控制，避免阴影过重。
? 小技巧：为便于调试，可临时添加 outline: 2px dashed red 到 .card，确认其实际渲染区域是否符合预期。
总结：Flex 布局本身不影响 box-shadow 渲染；问题根源在于阴影应用层级错误 + 父容器溢出裁剪。始终优先将 box-shadow 施加在承担视觉容器职责的元素（如 .card）上，而非其内部媒体元素（如 img），这是构建健壮、可维护卡片布局的关键实践。
