如何使用 html 和 css 绘制虚线，如下所示。不是虚线。
“------------------------------------------------ ——”
可以使用这个边框：1px虚线。
但需要增加破折号的长度尺寸，而不是宽度
Use repeating-linear-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
