更改hr元素的颜色

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

hr {
    color: #123455;
}

当前回答

我认为这是最有效的方法:

<hr style="border-top: 1px solid #ccc; background: transparent;">

或者如果你喜欢在所有的hr元素上写这个CSS:

hr {
  background-color: transparent;
  border-top: 1px solid #ccc;
}

其他回答

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

一般来说，你不能像设置其他颜色一样，用CSS设置水平线的颜色。首先，Internet Explorer需要CSS中的颜色读起来像这样:

“颜色:# 123455”

但是Opera和Mozilla需要你的CSS中的颜色读起来像这样:

background - color: # 123455”

因此，您需要将这两个选项添加到您的CSS中。

接下来，你需要给水平线一些尺寸，否则它将默认为浏览器设置的标准高度、宽度和颜色。下面是一个示例代码，说明了你的CSS应该是什么样的，才能得到蓝色的水平线。

hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}

或者当你插入一条水平线时，你可以直接在你的HTML页面中添加样式，就像这样:

<hr style="background:#123455" />

希望这能有所帮助。

我认为你应该使用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 style="background-color: #dd3333" />

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

<hr class="bg-light" />

推荐文章