html - 更改 hr 元素的颜色

Question

我想使用 CSS 更改 hr 标签的颜色。我在下面尝试过的代码似乎不起作用:

hr {
    color: #123455;
}

Answer 1

我认为你应该使用 border-color而不是 color , 如果您的意图是更改 <hr> 生成的线条的颜色标记。

虽然，评论中已经指出，如果你改变线条的大小，边框仍将与你在样式中指定的一样宽，并且线条将使用默认颜色填充(这不是预期的效果大多数时候)。因此，在这种情况下，您似乎还需要指定 background-color (正如@Ibu 在他的回答中所建议的那样)。

HTML 5 Boilerplate 元素的默认样式表 specifies以下规则:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

一篇文章，标题为 “12 Little-Known CSS Facts” ，最近由 SitePoint 发布，提到 <hr>可以设置它的border-color到其 parent 的color如果您指定 hr { border-color: inherit } .