在js轮播中围绕子弹圈

Question

请在子弹（幻灯片）处于活动状态时，建议如何使用CSS在子弹上画圈？

现在我的CSS代码是：

.slide-dot {
cursor: pointer;
height: 10px;
width: 10px;
text-decoration: none;
background-color: #bbb;
border-radius: 50%;
display: inline-block;}

.active {
background-color: #FFE600;
}

示例：Carousel bullets

Answer 1

在点上添加填充和透明边框。用background-clip: content-box防止背景影响填充和边框区域。激活时更改颜色：

.slide-dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  text-decoration: none;
  color: #bbb;
  background-color: currentColor;
  border-radius: 50%;
  display: inline-block;
  padding: 2px;
  background-clip: content-box;
  border: 2px solid transparent;
}

.active {
  color: #FFE600;
  border-color: currentColor;
}

<div class="slide-dot"></div>
<div class="slide-dot active"></div>
<div class="slide-dot"></div>
<div class="slide-dot"></div>
<div class="slide-dot"></div>