如何使用html和css如下绘制虚线。不是虚线。
” ---------------------------------------------- ----“
可以使用此边框:1px虚线。 但是需要增加破折号的长度大小而不是宽度
答案 0 :(得分:5)
使用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!*/
}
<div class="line"></div>
<div class="line1"></div>
<div class="line2"></div>
您还可以使用多个背景将它们全部放在同一个元素中:
.line {
margin:5px 0;
height:20px;
background:
repeating-linear-gradient(to right,red 0,red 5px,transparent 5px,transparent 7px) top,
repeating-linear-gradient(to right,red 0,red 3px,transparent 3px,transparent 7px) center,
repeating-linear-gradient(to right,red 0,red 10px,transparent 10px,transparent 12px) bottom;
background-size:100% 2px;
background-repeat:no-repeat;
}
<div class="line"></div>