html - 如何使用html和css绘制虚线

Question

如何使用 html 和 css 绘制虚线，如下所示。不是虚线。

"-------------------------------------------- ----”

可以使用这个边框:1px 虚线。但是需要增加破折号的长度，而不是宽度

Answer 1

使用repeating-linear-gradient您可以根据需要控制大小和间距:

.line {
  margin:5px 0;
  height:2px;
  background:
    repeating-linear-gradient(90deg,red 0 5px,#0000 0 7px)
    /*5px red then 2px transparent -> repeat this!*/
}

.line1 {
  margin:5px 0;
  height:2px;
  background:
    repeating-linear-gradient(90deg,red 0 3px,#0000 0 7px)
    /*3px red then 4px transparent -> repeat this!*/
}

.line2 {
  margin:5px 0;
  height:2px;
  background:
    repeating-linear-gradient(90deg,red 0 10px,#0000 0 12px)
    /*10px red then 2px transparent -> repeat this!*/
}

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

您还可以使用多个背景将它们全部放在同一个元素中:

.line {
  margin:5px 0;
  height:20px;
  background:
    repeating-linear-gradient(90deg,red 0 5px ,#0000 0 7px) top,
    repeating-linear-gradient(90deg,red 0 3px ,#0000 0 7px) center,
    repeating-linear-gradient(90deg,red 0 10px,#0000 0 12px) bottom;
  background-size:100% 2px;
  background-repeat:no-repeat;
}

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