改变hr元素的颜色

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

hr {
    color: #123455;
}
Uwe Keim
已编辑的问题 28日 十二月 2018 в 1:22
编程
html css
17日 六月 2011 в 6:15
21 种观点
解决办法

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

不过，有人在评论中指出，如果你改变了线的大小，边框仍然会和你在样式中指定的一样宽，而线会用默认的颜色填充（这在大多数情况下不是一个理想的效果）。所以在这种情况下，你似乎还需要指定 "背景色"（正如@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: inherit }，那么<hr>可以将其border-color设置为其父辈的color。

Anton Strogonoff
编辑本段答案13日 四月 2019 в 10:32
评论(5)
 
hr
{
color:#f00;
背景颜色。#f00;
高度：5px。
}
评论(0)
 
hr
{
  background-color: #123455;
}

背景是你应该尝试改变的。

你也可以改变边框的颜色。我不确定，我认为这有跨浏览器的问题，你应该在不同的浏览器上进行测试

评论(5)