当为子元素（如 ）设置 box-shadow 时，若父容器启用 display: flex，阴影可能被裁剪或不可见；正确做法是将 box-shadow 移至父级 .card 元素，并确保其具有明确的尺寸与 overflow: visible（默认即满足）。
当为子元素（如 ``）设置 `box-shadow` 时，若父容器启用 `display: flex`，阴影可能被裁剪或不可见；正确做法是将 `box-shadow` 移至父级 `.card` 元素，并确保其具有明确的尺寸与 `overflow: visible`（默认即满足）。
在使用 CSS Flex 布局时，一个常见误区是：将 box-shadow 直接应用在 <img alt="如何修复 Flex 布局下 box-shadow 不显示的问题" > 等内联或替换元素上，同时其父容器（如 .card）设置了 overflow: hidden —— 这正是本例中阴影“消失”的根本原因。
虽然 .card 的 overflow: hidden 本意是裁剪图片溢出（如圆角配合图片宽高不一致），但它同样会裁剪掉超出其边界的所有内容，包括 box-shadow。而 box-shadow 是绘制在元素 边界框之外 的视觉效果，一旦父容器限制了溢出渲染，阴影就会被截断。
✅ 正确解决方案是：
- 将
box-shadow从<img alt="如何修复 Flex 布局下 box-shadow 不显示的问题" >上移除； - 应用到
.card容器本身； - 保持
.card的overflow: hidden（仍用于控制图片裁剪），但需注意：box-shadow默认绘制在元素 外边距之外，只要.card自身未被其他祖先元素裁剪（如overflow: hidden的上级容器），阴影即可正常显示。
以下是修正后的关键 CSS 片段：
.card {
width: 32%;
position: relative;
overflow: hidden; /* 保留以控制图片圆角裁剪 */
border-radius: 10px;
margin-bottom: 20px;
/* ✅ box-shadow 现在作用于 .card，阴影可完整呈现 */
box-shadow: 40px 40px 20px rgba(51, 51, 51, 0.5);
}
.card img {
width: 100%;
height: 100%;
filter: grayscale(100%);
/* ❌ 移除此处的 box-shadow，避免被 .card 的 overflow 隐藏 */
}⚠️ 注意事项：
-
box-shadow的模糊半径（第三个值）越大，越容易被overflow: hidden裁剪，因此务必将其置于无裁剪限制的容器上； - 若
.gallary或.container也设置了overflow: hidden，需检查是否意外遮挡了.card的阴影区域； - 推荐使用
rgba()替代纯色十六进制（如#333），提升透明度可控性与视觉层次； - 在响应式场景中，可搭配
@supports (display: flex)添加渐进增强，确保老浏览器降级兼容。
总结：Flex 布局本身不会“禁用” box-shadow，真正影响显示的是 层叠上下文 + 溢出裁剪规则。把阴影放在语义更合理、且不受 overflow: hidden 干扰的父级块级容器上，是解决此类问题的标准实践。
