使用Flex布局时Box-Shadow属性失效问题求助

问题说明 #

给.gallary容器加上display: flex等Flex布局属性后，图片上设置的box-shadow就消失了，去掉Flex布局阴影又能正常显示。当前阴影是直接加在<img>元素上的，图片被包裹在.card容器里。

问题根源 #

1. .card的overflow: hidden截断了阴影：.card设置了overflow: hidden，而<img>的阴影偏移后超出了.card的边界，Flex布局下元素尺寸是严格按容器分配的，阴影被完全切掉；非Flex布局时元素可能有额外空间，阴影能露出一部分。
2. 阴影方向和Flex紧凑布局冲突：当前阴影是40px 40px 20px #333，向右下偏移的阴影在Flex布局的紧凑排列下，被相邻卡片或者容器边缘挡住了。

解决方法 #

方法一：把阴影移到.card容器上 #

把box-shadow从<img>转移到.card上，同时给.card加一点内边距，避免图片贴紧容器边缘：

.card{
    width: 32%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 40px 40px 20px #333; /* 阴影移到这里 */
    padding: 5px; /* 可选，让图片和阴影容器留间隙 */
}

.card img{
    width:100%;
    height:100%;
    filter: grayscale(100%);
    /* 删掉img上的box-shadow */
}

方法二：去掉.card的overflow: hidden（如果不需要圆角裁剪） #

如果不需要.card裁剪图片的超出部分，直接移除overflow: hidden，阴影就能正常显示：

.card{
    width: 32%;
    position: relative;
    /* 移除overflow: hidden */
    border-radius: 10px;
    margin-bottom: 20px;
}

方法三：调整阴影参数适配Flex布局 #

缩小阴影的偏移量和模糊范围，让阴影不超出.card的边界：

.card img{
    width:100%;
    height:100%;
    filter: grayscale(100%);
    box-shadow: 10px 10px 15px #333; /* 减小偏移和模糊值 */
}

完整修改后CSS示例（方法一） #

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper{
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.container{
    max-width: 1200px;
    margin:0px auto;
    height: 100%;
}
.container h1{
    text-align: center;
}

.gallary{
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between ;
}

.card{
    width: 32%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 40px 40px 20px #333;
    padding: 5px;
}

.card img{
    width:100%;
    height:100%;
    filter: grayscale(100%);
}

内容的提问来源于stack exchange，提问作者Manthan Sharma