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%;
    }
  }

overflow hidden 是可行的