css虚线hr是一组小正方形，而不是圆点/圆点

下面是我添加到CSS样式表标题中的部分：

<style>

    body{
      background-color: #EAF6F6;
    }

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

  </style>

身体{
背景色：#EAF6F6；
}
人力资源{
边框样式：无；
边框顶部样式：虚线；
边框颜色：浅灰色；
边框宽度：5px；
宽度：5%；
}

下面是它的样子：

正如你所看到的，它看起来更像正方形，而不是圆点，我在下面的教程中使用了完全相同的代码，但最后在一条线中出现了小点，也就是虚线！为什么会这样？

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

.一级{ 边框：5px虚线#000； 边框颜色：红色； }

---

尝试将此类包含在您的hr标记中

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

以下浏览器渲染方点：

• 马科斯野生动物园
• 野生动物园
• Chrome iOS

以下浏览器渲染圆点：

• Chrome MacOS
• 镀铬窗
• Firefox MacOS
• 火狐视窗
• 边窗

---

这里有一个线程，可以为您提供替代解决方案，例如使用图像、SVG或字体来实现所有浏览器的一致外观

在我的结尾看起来也不错，请创建一个片段并向我们展示问题，这取决于浏览器决定如何渲染虚线边框。有些可能使用圆点。有些可能使用正方形。有些人可能用鸡。这超出了你的控制。