如何让Bootstrap轮播中元素的box-shadow不被父元素遮挡

我使用Bootstrap的carousel组件实现物品展示，为带有logo-com类的子元素设置了box-shadow属性，但该阴影被父元素遮挡无法完全显示，相关代码如下：

HTML代码 #

<div class="partner container">
    <div class="partner-title">
      <h5>{{ setLang("title") }}</h5>
      <h2>{{ setLang("titleSecond") }}</h2>
    </div>
    <div
      id="carouselExampleIndicators2"
      class="carousel slide"
      data-ride="carousel"
      data-pause=false
    >
      <div class="carousel-inner">
        <div  class="carousel-item active">
          <div class="partner-logo" id="show-slide">
            <div
              class="logo-com"
              v-for="(item, index) in partners"
              :key="index"
            >
              <img :src="`${assetsPath}${item.url}`" alt="" />
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="partner-logo" id="show-slide">
            <div
              class="logo-com"
              v-for="(partner, index) in partners"
              :key="index"
            >
              <img :src="`${assetsPath}${partner.url}`" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS代码 #

.partner-logo {
    display: flex;
    justify-content: space-around;
    width: 100%;
    flex-wrap: wrap;
    padding: 20px 0;
}
.logo-com, .logo-com img {
    display: flex;
    align-items: center;
}
.logo-com {
    background: #fff;
    box-shadow: 0 15px 94px rgb(0 56 139 / 13%);
    border-radius: 20px;
    height: 134px;
    width: 265px;
    margin-top: 23px;
    justify-content: center;
}

解决办法 #

阴影被遮挡的核心原因是：阴影绘制在元素边界之外，若父元素存在overflow: hidden或未预留足够空间，就会裁剪掉超出部分。可以通过以下两种方式解决：

1. 给父元素添加足够内边距
   修改.partner-logo的padding属性，为阴影留出显示空间：

   .partner-logo {
       display: flex;
       justify-content: space-around;
       width: 100%;
       flex-wrap: wrap;
       padding: 20px; /* 将原有的20px 0改为上下左右都有内边距 */
   }
   

   这样.logo-com的阴影就不会被父元素的边界裁剪。

2. 允许父元素内容溢出
   检查父元素（比如.carousel-item）是否有overflow: hidden的默认样式，若有则覆盖为overflow: visible：

   .carousel-item {
       overflow: visible;
   }
   

   这个设置会让子元素的阴影可以超出父元素范围显示，注意需结合实际布局调整，避免影响轮播功能。

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