更改 hr 元素的颜色

Question

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

 hr {
    color: #123455;
}

原文由 koool 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为你应该使用 border-color 而不是 color ，如果你打算改变 <hr> 标签产生的线的颜色。

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

HTML 5 Boilerplate 项目在其默认样式表 中指定 了以下规则：

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

SitePoint 最近发表 的一篇 名为 “12 Little-Known CSS Facts” 的文章提到 <hr> 可以将它的 border-color 设置为它的父级的 color 指定 hr { border-color: inherit } 。

原文由 Anton Strogonoff 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

• border-color 适用于 Chrome 和 Safari 。
• background-color 适用于 Firefox 和 Opera。
• color 适用于 IE7+ 。

原文由 Cameron 发布，翻译遵循 CC BY-SA 4.0 许可协议