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

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

看小提琴。

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

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

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

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

你可以使用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);

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

你应该设置border-width为0;它在火狐和Chrome浏览器上运行良好。

人力资源{ 明确:; 颜色:红色; 背景颜色:红色; 身高:1 px; 边框宽度:0; ｝ <人力资源/ > 这是一个测试 <人力资源/ >