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

示例：

Answer 1

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

Note: 我用 currentColor 通过一个属性来控制背景和边框。

.slide-dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  text-decoration: none;
  color: #bbb;
  background-color: currentColor;
  border-radius: 50%;
  display: inline-block;
  padding: 5px;
  background-clip: content-box;
  border: 1px 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>

Answer 2

div {
  margin-top: 50px;
}

.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: black;
  border: 1px solid yellow;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 1px #cfd1d1;
}

<!-- The bullets -->
<div style="text-align:center">
  <span class="dots"><span class="dot" onclick="currentSlide(1)"></span></span>
  <span class="dots"><span class="dot" onclick="currentSlide(2)"></span></span>
  <span class="dots"><span class="dot" onclick="currentSlide(3)"></span></span>
</div>

希望你能通过这个有所了解:)

在 js 轮播中围绕项目符号画圈

Make circle around bullet in js carousel

css

carousel