更改hr元素的颜色

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

hr {
    color: #123455;
}

当前回答

在阅读了这里所有的答案，并看到了所描述的复杂性之后，我开始了一个关于人力资源实验的小转移。并且，结论是你可以扔掉你写的大部分monkeypatched CSS，阅读这篇小入门，只使用这两行纯CSS:

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

这就是你为人事简历设计风格所需要的全部内容。

适用于跨浏览器、跨设备、跨操作系统、跨英语频道、跨年龄。没有“我认为这可以工作……”，“你需要记住Safari/IE……”等等。没有额外的CSS -没有高度，宽度，背景颜色，颜色等涉及。

只有防弹的彩色hr。就是这么简单。

奖励:给HR一些高度H，只要设置边界宽度为H/2。

其他回答

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

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

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

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

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

代码适用于旧的IE 尝试了很多颜色 <人力资源颜色=“黑色”> <人力资源颜色= "蓝色" >

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

推荐文章