更改hr元素的颜色

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

hr {
    color: #123455;
}

当前回答

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

其他回答

你可以像这样添加引导bg类

<hr class="bg-light" />

你应该设置border-width为0;它在火狐和Chrome浏览器上运行良好。

人力资源{ 明确:; 颜色:红色; 背景颜色:红色; 身高:1 px; 边框宽度:0; ｝ <人力资源/ > 这是一个测试 <人力资源/ >

这将保持水平规则1px厚，同时改变它的颜色:

hr {
  height: 0; 
  border: 0; 
  border-top: 1px solid #083972; 
}

你可以这样做:

人力资源{ 边框:1px纯红色; ｝ <人力资源/ > 这是个测试 <人力资源/ >

我认为你应该使用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}。

推荐文章