html - 遇到麻烦在 CSS 中

Question

当我使用此代码时，它会显示我想要的圆点。但这只发生在 chrome 中，当我在 safari 上查看网站时，它是方形的。有没有办法让它在 safari 和 chrome 上显示相同？

我在 chrome 中尝试过它，它工作得很好，但在 safari 上它是正方形的。

hr {
  border-style: none;
  border-top-style: dotted;
  border-color:green;
  border-width: 10px;
  width:30%;
}

<hr>

标签： htmlcss

Answer 1

尝试这个：

hr {
border-top: 10px dotted green; 
width: 30%;
height: 0.01px;
border-top-style: dotted;
border-left: none;
border-right: none;
border-bottom: none;
color: green;
display: block;
border-color: green;
}

<hr>