当对 Flex 项目（如 .card）内的 img 元素设置 box-shadow 时，阴影可能因图片被父容器裁剪或层级关系而不可见；解决方案是将 box-shadow 移至父容器（如 .card）上，并移除 img 上的阴影声明。
当对 flex 容器中的子元素（如 ``）设置 `box-shadow` 时，阴影可能因图片被父容器裁剪或层级关系而不可见；解决方案是将 `box-shadow` 移至父容器（如 `.card`）上，并移除 `img` 上的阴影声明。
在使用 CSS Flex 布局时，一个常见误区是：将 box-shadow 直接写在 <img> 标签上，却忽略了其父容器（如 .card）设置了 overflow: hidden —— 这会导致阴影被强制裁剪，即使 display: flex 本身并不影响阴影渲染。
回顾你的代码：
.card {
width: 32%;
position: relative;
overflow: hidden; /* ⚠️ 关键问题：此属性会裁掉超出边界的阴影 */
border-radius: 10px;
margin-bottom: 20px;
}
.card img {
width: 100%;
height: 100%;
filter: grayscale(100%);
box-shadow: 40px 40px 20px #333; /* ❌ 阴影在此处会被 .card 的 overflow: hidden 截断 */
}
✅ 正确做法是：
-
将
box-shadow应用于.card元素本身（它不设overflow: hidden时可完整显示阴影）； -
移除
img上的box-shadow，避免冗余与裁剪冲突； - 若仍需保留圆角+阴影组合效果，建议同时为
.card设置border-radius和box-shadow，确保视觉一致性。
修正后的 CSS 片段如下：
.card {
width: 32%;
position: relative;
overflow: hidden; /* 保留以防止图片溢出，但阴影不再依赖 img */
border-radius: 10px; /* 与阴影配合更自然 */
margin-bottom: 20px;
box-shadow: 40px 40px 20px rgba(0, 0, 0, 0.3); /* ✅ 推荐使用 rgba 提升可读性 */
}
.card img {
width: 100%;
height: 100%;
object-fit: cover; /* 推荐添加：确保图片比例适配且不失真 */
filter: grayscale(100%);
/* ❌ 移除此处的 box-shadow */
}
/* 可选：提升 hover 效果（增强交互感） */
.card:hover {
box-shadow: 50px 50px 30px rgba(0, 0, 0, 0.4);
}
? 注意事项：
-
overflow: hidden是“隐形杀手”：只要父元素设置了该属性，任何子元素超出其边界的box-shadow、transform偏移或伪元素都将被裁剪； - Flex 布局本身 不会禁用
box-shadow，问题根源在于层叠上下文与溢出控制； - 若需在
img上保留阴影（例如独立悬浮效果），可临时取消.card的overflow: hidden，改用clip-path或mask精确控制裁剪区域（进阶方案）； - 阴影参数中推荐使用
rgba()替代纯色十六进制（如#333），便于后期调整透明度，提高维护性。
总结：Flex 不是阴影消失的元凶，overflow: hidden + 错误的阴影挂载位置才是关键。始终优先将 box-shadow 应用于具有明确尺寸和可控溢出行为的容器级元素，这是构建健壮、可维护卡片布局的最佳实践。
