<hr> 的默认浏览器样式是 *非常奇怪的*。 它基本上是
border-style: inset;
border-width: 1px;默认的 border-color 是 black，但边框实际上 *看起来* 不是黑色，因为内嵌边框“在该线添加了分色，使该元素看起来稍微凹陷”。
如果我将 border-width 增加到 40px，您可以更清楚地看到它
我经常将 <hr> 重置为“只是一条线”，它总是让我困惑，因为我会尝试一些方法，例如 height: 1px 以及一开始的背景，但这不正确。 清除它的更简单方法是关闭所有边框，然后只使用 border-top 或 border-bottom。 或者，关闭所有边框，设置高度，然后使用背景。
无论如何... Sara 在她网站的当前设计中有一些最漂亮的水平线，而且 她已经把所有内容都写出来了。 你猜怎么着？ 它们甚至不是 <hr> 元素！ 事实证明，你唯一可以使用的样式钩子是 CSS，这不像 Sara 所需要的那么灵活，所以她最终使用了 <div role="separator"> (TIL!) 以及内联 SVG。
获取 SVG 全方位灵活性的最佳方法是将其内联。 但是
<hr>元素是无内容的——它没有用于放置其他元素的开始和结束标签。在保留屏幕阅读器用户语义的同时解决
<hr>限制的唯一方法是使用div并使用 ARIA 提供hr的语义。