css - css dotted hr 是一组小正方形而不是点/cricles

Question

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

<style>

    body{
      background-color: #EAF6F6;
    }

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

  </style>

这就是它的样子：

正如你所看到的，它看起来更像正方形而不是像圆点这样的圆形，我遵循的教程有完全相同的代码，但最后是一行中的小点，也就是虚线！这是为什么？

Answer 1

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

以下浏览器呈现方点：

• Safari MacOS
• Safari iOS
• 铬 iOS

以下浏览器呈现圆点：

• 铬 MacOS
• 铬窗口
• 火狐MacOS
• 火狐视窗
• 边窗

这是一个为您提供替代解决方案的线程，例如使用图像、SVG 或字体在所有浏览器中实现一致的外观。如何在 WebKit 浏览器中创建带有圆点的虚线边框？

Answer 2

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

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