Bootstrap 5.3轮播切换时圆角图片先显直角后恢复圆角

开发Bootstrap 5.3轮播组件时，发现切换过渡过程中，设置了圆角的图片会先显示直角，过渡完成后才恢复圆角状态。

过渡异常效果截图：

正常效果截图：

已尝试以下方法均未解决问题：

• 检查div标签结构是否缺失
• 查阅Bootstrap官方文档
• 在StackOverflow搜索相关问题
• 给图片添加内联样式 style="border-radius:2rem!important"

自定义styles.css代码（仅部分） #

i {
    padding-right:15px;
}
.iconwithoutpadding {
    padding-right:0px;
    padding-left:0px;
}
.dropup-tall-screens {
    position: absolute;
    bottom:0;
    padding-bottom:2vh;
}
.dropdown-small-screens{
    position:relative;
    display:none;
}
.small-screen-navbar {
    display: none;
}
/* Change the background color to #343a39 when the data-bs-theme is not "light" */
html:not([data-bs-theme="light"]) .nav-item .dropdown-toggle:hover {
    background-color: #343a39;
}
.hrDarkNav {
    border-top:1px solid #656666;
}
/* Change the background color to #343a39 when the data-bs-theme is not "light" */
html:not([data-bs-theme="light"]) .nav-item-only-hover:hover {
    background-color: #343a39;
}
.offcanvas-body {
    padding-top: 0;
}
@media screen and (max-height: 555px) {
    .dropdown-small-screens {
        display:block;
    }
    .offcanvas-body {
        margin-bottom: 1rem;
    }
    .dropup-tall-screens{
        display:none;
    }
}
@media screen and (max-width: 210px){
    .small-medium-screen-offcanvas{
        display: none;
    }
    .small-screen-navbar {
        display: block;
    }
}
/* Change the background color to a lighter color when the data-bs-theme is "light" */
html[data-bs-theme="light"] .nav-item .dropdown-toggle:hover {
    background-color: #f8f9fa;
    color:#0d6efd;
}
/* Change the background color to a lighter color when the data-bs-theme is "light" */
html[data-bs-theme="light"] .nav-item-only-hover:hover {
    background-color: #f8f9fa;
    color: #0d6efd;
}
#cookie-consent {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 1rem;
    text-align: center;
}
#cookie-consent p {
    margin: 0;
    font-size: 0.9rem;
}
#cookie-consent button {
    background-color: transparent;
    border: 0;
    color: #007bff;
    cursor: pointer;
    font-size: 0.9rem;
    outline: 0;
}
/* Make the cookie consent banner visible */
#cookie-consent.visible {
    display: block;
}
/* Hide the cookie consent banner by default */
#cookie-consent {
    display: none;
}
/* Hide a modal below a specific width */
@media (max-width: 767px) {
    .modal-backdrop { 
        display: none !important;
    }
    #searchModal {
        display: none !important;
    }
    .modal-dialog {
        display: none !important;
    }
}
/* Hide a modal below a specific width */
@media (max-width: 500px) {
    .modal-backdrop { 
        display: none !important;
    }
    #searchModal { 
        display: none !important;
    }
    .modal-dialog {
        display: none !important;
    }
}
/* Padding for boxed layout */
@media (min-width: 500px) and (max-width: 767px) {
    .boxed-layout{
        padding-left:20px;
        padding-right:20px;
    }
}
/* Padding for boxed layout */
@media (max-width: 500px){
    .boxed-layout{
        padding-left:10px;
        padding-right:10px;
    }
}
/* Padding for boxed layout */
@media (min-width: 768px){
    .boxed-layout{
        padding-left:20px;
        padding-right:20px;
    }
}
.text {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    font-size: 10px;
}

轮播HTML代码 #

<div class="container">
   <!-- Content -->
   <!-- Carousel wrapper -->
   <div id="carouselMaterialStyle" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
      <!-- Indicators -->
      <div class="carousel-indicators">
         <button type="button" data-bs-target="#carouselMaterialStyle" data-bs-slide-to="0" class="active" aria-current="true"
            aria-label="Slide 1"></button>
         <button type="button" data-bs-target="#carouselMaterialStyle" data-bs-slide-to="1" aria-label="Slide 2"></button>
         <button type="button" data-bs-target="#carouselMaterialStyle" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <!-- Inner -->
      <div class="carousel-inner rounded-5 shadow-4-strong" data-bs-touch="true">
         <!-- Single item -->
         <div class="carousel-item active">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(25).webp" class="d-block w-100"
               alt="Sunset Over the City" />
            <div class="text">#1</div>
            <div class="carousel-caption d-none d-md-block">
               <h5>First slide label</h5>
               <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
         </div>
         <!-- Single item -->
         <div class="carousel-item">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp" class="d-block w-100"
               alt="Canyon at Nigh" />
            <div class="text">#2</div>
            <div class="carousel-caption d-none d-md-block">
               <h5>Second slide label</h5>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
         </div>
         <!-- Single item -->
         <div class="carousel-item">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp" class="d-block w-100"
               alt="Cliff Above a Stormy Sea" />
            <div class="text">#3</div>
            <div class="carousel-caption d-none d-md-block">
               <h5>Third slide label</h5>
               <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
         </div>
      </div>
      <!-- Controls -->
      <div class="carousel-control-bottom-right">
         <button class="carousel-control-prev" type="button" data-bs-target="#carouselMaterialStyle" data-bs-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Previous</span>
         </button>
         <button class="carousel-control-next" type="button" data-bs-target="#carouselMaterialStyle" data-bs-slide="next" style="opacity:1">
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Next</span>
         </button>
      </div>
   </div>
   <!-- Inner -->
   <!-- Carousel wrapper -->
</div>

问题原因及解决方案 #

问题根源是carousel-fade过渡时，非活跃的carousel-item会被设置opacity:0，而圆角仅加在carousel-inner上，过渡过程中图片会超出容器裁剪范围，导致直角短暂暴露。

方案一：给容器添加溢出隐藏

给carousel-inner添加overflow: hidden，确保过渡时图片不会超出圆角容器边界：

.carousel-inner {
    overflow: hidden;
}

方案二：直接给图片和轮播项加圆角

如果方案一无效，可直接给图片设置圆角，同时让carousel-item也裁剪溢出内容：

.carousel-item {
    overflow: hidden;
}
.carousel-item img {
    border-radius: 2rem;
}

注意：确保自定义样式优先级高于Bootstrap默认样式，可通过增加选择器权重或使用!important（不推荐滥用）来实现。

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