css虚线hr是小方块集不dots/cricles

Question

这是我在 header 中添加到 CSS 样式 sheet 的部分：

<style>

    body{
      background-color: #EAF6F6;
    }

    hr{
border-style: none;
border-top-style: dotted;
border-color: lightgrey;
border-width: 5px;
width: 5%;
    }

  </style>

这是它的样子：

如您所见，它看起来更像正方形，而不是像圆点这样的圆形，我正在学习的教程有完全相同的代码段，但最后在 a.k.a 虚线行中有小点！这是为什么？

Answer 1

<hr class="class-1" />     
.class-1 {
border: 5px dotted #000;
border-color: red;
}

尝试将此 class 包含在您的 hr 标签中

Answer 2

虚线的呈现方式因浏览器和操作系统而异。我很快运行在多个系统上使用多个浏览器进行测试。

以下浏览器呈现方点：

Safari MacOS
Safari iOS
Chrome iOS

以下浏览器呈现圆点：

Chrome MacOS
Chrome Windows
Firefox MacOS
Firefox Windows
边缘Windows

这是一个为您提供替代解决方案的线程，例如使用图像、SVG 或字体在所有浏览器中实现一致的外观。 How to create dotted border with round dots in WebKit browsers?

css虚线hr是小方块集不dots/cricles

css dotted hr is set of little square not dots/cricles

css

dotted-line