hr {
  background-color: #123455;
}

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

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

border-color适用于Chrome和Safari浏览器。 background-color适用于Firefox和Opera。 颜色工作在IE7+。

我喜欢设置边界顶部的答案，但他们不知何故仍然有点离开Chrome… 但是如果我设置border-top: 1px纯黑色;And border-bottom: 0px;我最终得到了一条真正的单线(这也适用于更高的厚度)。

你可以使用CSS来创建一条不同颜色的线，示例如下:

border-left: 1px solid rgb(216, 216, 216);
border-right: medium none;
border-width: medium medium medium 2px;
border-style: none none none solid;
border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216, 216, 216);

该代码将显示垂直的灰线。

有些浏览器使用color属性，有些使用background-color属性。为了安全起见:

hr {
  color: #color;
  background-color: #color;
}

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

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

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

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

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

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