javascript - 如何定义带间距和重复的点

Question

我想画点或圆圈，如何获得圆圈或点的边框。如何定义间距和重复。请看我的照片。

    <div class="dots1"></div>
    <div class="dots2"></div>
    <div class="dots3"></div>

}

  :root {
      --diameter1: 0px;
      --diameter2: 0px;
      --diameter3: 0px;


.dots1, .dots2, .dots3 {
  border-image:url('border-image.png') 8 repeat;
  position: fixed;
  bottom: 0px;
  top: 50px;
  background: rgba(80, 219, 229,0.25);
  transform: translateY(50);
}


.dots1 {


}

.dots2 {

}

.dots3 {

}

• 重复？？？？ 8次和50px间距

Answer 1

您可以使用CSS网格来做到这一点

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(8, 50px);
  grid-gap: 50px;
}

.box {

  padding: 10px;
  font-size: 150%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.dot {
  background-color: #000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

<div class="wrapper">
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
  <div class="box"><div class="dot"></div></div>
</div>