html - 试图用CSS绘制虚线-LMLPHP

我试图用CSS绘制此图,但没有解决方案。
谁能帮我这个?
附言:谢谢您,我所做的工作很少。

最佳答案

您可以在此处使用CSS pseudo元素来绘制虚线,如下所示:



.border {
  border-top: 1px dotted #000000;
  position: relative;
  margin: 100px 0 0 0;
  height: 4px;
}
.border::after {
  content: "";
  height: 1px;
  border-top: 1px dotted #000000;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.border::before {
  content: "";
  height: 1px;
  border-top: 1px dotted #000000;
  width: 100%;
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
}

<div class="border">

</div>

07-24 09:50
查看更多