在水平方向上重复、高度为2像素的渐变线条 虚线

  <div class="dashed-border"></div>

css

 .dashed-border {
    width: 100%;
    height: 2px;
    background-image: linear-gradient(
      to right,
      rgba(0, 240, 255, 0.3) 0%,
      rgba(0, 240, 255, 0.3) 50%,
      transparent 50%
    );
    background-size: 8px 2px;
    background-repeat: repeat-x;
  }