更改hr元素的颜色

我想用CSS改变我的hr标签的颜色。我尝试了下面的代码似乎不工作:

hr {
    color: #123455;
}

当前回答

我两边都打了个赌:

hr {
  border-top: 1px solid purple;
  border-color: purple;
  background-color: purple;
  color: purple;
}

其他回答

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

尽管如此，评论中已经指出，如果你改变了线条的大小，边框仍然会和你在样式中指定的一样宽，并且线条将被默认的颜色填充(这在大多数情况下不是理想的效果)。所以在这种情况下，你似乎还需要指定background-color(就像@Ibu在他的回答中建议的那样)。

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

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

SitePoint最近发表了一篇名为“12个鲜为人知的CSS事实”的文章，提到<hr>可以将它的border-color设置为它的父颜色，如果你指定了hr {border-color: inherit}。

hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

这样做可以让你在需要的时候改变高度。祝你好运。来源:如何用CSS样式HR

hr {
  color: #f00;
  background-color: #f00;
  height: 5px;
}

我喜欢设置边界顶部的答案，但他们不知何故仍然有点离开Chrome… 但是如果我设置border-top: 1px纯黑色;And border-bottom: 0px;我最终得到了一条真正的单线(这也适用于更高的厚度)。

我在2015年5月的IE, Firefox和Chrome上进行测试，这在当前版本中效果最好。它将HR居中，并使其70%宽:

人力资源。光{ 宽度:70%; 保证金:0汽车; 边框:0px无白色; Border-top:1px纯浅灰色; ｝ <hr class="light" />

推荐文章