css - 如何创建自定义虚线

Question

我想创建一个组件，其中有一条看起来像这样的虚线，基本上我想为每个破折号添加一个边框半径，使其像图片中那样 flex 。

到目前为止我尝试过:

.line {
  height: 12px;
  background: repeating-linear-gradient(to right,#52cc7a 0,#52cc7a 6px,transparent 6px,transparent 18px)
}

<div class="line"></div>

Answer 1

您可以使用径向渐变来近似它:

.line {
  height: 12px;
  background: 
   radial-gradient(4px 8px, #52cc7a 80%,transparent 87%) 0 0/20px 100%;
   
}

<div class="line"></div>