如何使用html和css绘制虚线

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

"------------------------------------------------- - "

可以使用此边框:1px虚线.但是需要增加破折号的长度尺寸.而不是宽度

使用repeating-linear-gradient,您可以按照自己的意愿控制尺寸和间距:

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

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

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