css - 背景大于 Circle Div CSS 的问题

Question

我尝试使用 React Slick 自定义点，并遇到背景颜色的问题。这是我设置样式的方法。

 .slick-dots.circle-dots {
    list-style-type: none;
    display: flex !important;
    justify-content: center;
    padding: 0;
    .slick-active {
      background-color: red;
      background-size: contain;
      border-radius: 50%;
    }
  }

这就是结果。背景实际上比带有 的圆圈大border-radius: 50%。由于点彼此相邻，因此很容易指出一个比其他点大，这很奇怪。有什么办法可以解决吗？

Answer 1

由于.slick-active是 的孩子.slick-dots.circle-dots，设置

 .slick-dots.circle-dots {
    list-style-type: none;
    display: flex !important;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    //hide anything that spans larger than the element 
    .slick-active {
      background-color: red;
      background-size: contain;
      border-radius: 50%;
    }
  }

隐藏溢出可以工作