轮播滑块指示器不是圆形

Question

问题是，当我使用

 定位 

.carousel-indicators button

时，我尝试使用 bootstrap Carousel Slider Indicator 将图像滑块引入我的网页中

    width: 10px;
height: 10px;
border-radius: 50%;

属性，它没有变成圆角，而是椭圆形，即使我增加边框半径它也显示相同

我的预期 O/P

我得到的 O/P 是

这是我的代码

index.html

<!-- Carousel Slider -->
 <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
    <!-- Indicators -->
 <div class="carousel-indicators">
   <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
   <button type="button"  data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" ></button>
   <button  type="button"  data-bs-target="#carouselExampleIndicators"  data-bs-slide-to="2"  aria-label="Slide 3"></button>
   <button  type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4" ></button>
   </div>

   <!-- Carousel Items -->
   <div class="carousel-inner">
     <div class="carousel-item active">
       <img src="./images/rev_home2_1.jpg" class="d-block w-100" alt="..." />
     </div>
     <div class="carousel-item">
       <img src="./images/rev_home2_2.jpg" class="d-block w-100" alt="..." />
     </div>
     <div class="carousel-item">
       <img src="./images/rev_home6_1.jpg" class="d-block w-100" alt="..." />
     </div>
     <div class="carousel-item">
       <img src="./images/rev_home3_1.jpg" class="d-block w-100" alt="..." />
     </div>
   </div>
 </div>

样式.css

.carousel-inner img {
    height: 130vh;
    object-fit: cover;
}

/* Carousel Indicators Rounded */
.carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    border: none; 
}

bootstrap class:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"/>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" ></script>

Answer 1

试试这个

.carousel-indicators [data-bs-target]  {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    border: none; 
}