hr {
  background-color: #123455;
}

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

你也可以使用边界的颜色。我不确定;我认为这存在跨浏览器的问题。您应该在不同的浏览器中测试它。

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

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

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

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

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

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

好吧，我是新的HTML, CSS和Java，但我尝试了我的方式，这对我在所有浏览器。我使用JS而不是CSS，它不适用于一些浏览器。

首先，我给HR元素赋予id="myHR"，并在Java Script中使用。 以下是守则。

x = document.getElementById("myHR");
y = x.style.width = "600px";
y = x.style.color = "white";
y = x.style.height = "2px";
y = x.style.border = "none";
y = x.style.backgroundColor = "lightgrey";

一般来说，你不能像设置其他颜色一样，用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" />

希望这能有所帮助。

在Firefox, Opera, Internet Explorer, Chrome和Safari中测试。

hr {
    border-top: 1px solid red;
}

看小提琴。

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

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