更改hr元素的颜色

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

hr {
    color: #123455;
}

当前回答

我两边都打了个赌:

hr {
  border-top: 1px solid purple;
  border-color: purple;
  background-color: purple;
  color: purple;
}

其他回答

我认为你应该使用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 noshade>标签，然后到你的css文件中添加:

人力资源{ border-top: 0; 颜色:# 123455; ｝ <hr noshade /> 这是个测试 <hr noshade />

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

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

看小提琴。

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

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

hr {
  background-color: #123455;
}

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

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

推荐文章