更改hr元素的颜色

Question

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

Answer 1

我想如果您打算更改tag 产生的线条的颜色，则应该使用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个鲜为人知的CSS事实”的文章，其中提到，如果您指定，<hr>可以将其设置border-color为其父项。colorhr { border-color: inherit }

Answer 2

• border-color可在Chrome和Safari中使用。

• background-color 在Firefox和Opera中均可使用。

• color在IE7 +中工作。

Answer 3

hr {

    height: 1px;

    color: #123455;

    background-color: #123455;

    border: none;

}

这样，您就可以根据需要更改高度。祝好运。资料来源：如何用CSS样式化HR