更改hr元素的颜色

Question

我想hr使用CSS 更改标签的颜色.我在下面尝试的代码似乎不起作用:

hr {
    color: #123455;
}

Answer 1

我认为你应该使用border-color而不是color,如果你的目的是改变<hr>标签产生的线的颜色.

虽然,在评论中已经指出,如果你改变你的线的大小,边框仍然会像你在样式中指定的那样宽,并且线将填充默认颜色(这不是大多数的期望效果时间).所以在这种情况下你似乎也需要指定background-color(如他在答案中建议的@Ibu).

默认样式表中的HTML 5 Boilerplate项目指定以下规则:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

最近由SitePoint发布的一篇名为"12个鲜为人知的CSS事实"的文章提到,如果你指定,<hr>可以将其设置border-color为其父级.colorhr { border-color: inherit }

Answer 2

• border-color适用于Chrome和Safari.
• background-color 适用于Firefox和Opera.
• color适用于IE7 +.

Answer 3

我认为这可能很有用.这是简单的CSS选择器.

hr { background-color: red; height: 1px; border: 0; }

Answer 4

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

这样做可以让你根据需要改变高度.祝好运.来源:如何使用CSS设置HR样式

Answer 5

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

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

看小提琴.

Answer 6

只有颜色的边框顶部足以使线条颜色不同.

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

Answer 7

hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}

这将保持水平规则1px厚,同时也改变它的颜色

Answer 8

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

Answer 9

我相信这是最有效的方法:

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

或者如果您喜欢在所有hr元素上执行此操作,请在CSS上写下:

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

Answer 10

您可以添加 bootstrap bg 类，例如

<hr class="bg-light" />

Answer 11

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

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

Answer 12

hr
{
  background-color: #123455;
}

背景是您应该尝试更改的背景

您也可以使用边框颜色。我不确定我是否认为与此相关的跨浏览器问题。您应该在不同的浏览器中对其进行测试

Answer 13

如果你使用css类,那么它将被所有'hr'标签占用,但如果你想要一个特定的'hr'使用下面的代码,即内联css

<hr style="color:#99CC99" />

如果它不在chrome中工作,请尝试以下代码:

<hr color="red" />

Answer 14

在阅读了这里的所有答案,并看到所描述的复杂性之后,我开始进行小规模的试验以实验人力资源.而且,结论是你可以抛弃你编写的大部分monkeypatched CSS,阅读这个小引物并使用这两行纯CSS:

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

这是所有你需要的风格你小时.

• 适用于跨浏览器,跨设备,跨操作系统,跨英语频道,跨年代.
• 没有"我认为这会起作用......","你需要记住Safari/IE ......"等.
• 没有额外的CSS -不height,width,background-color,color,等方式参与.

只是防弹多彩的人力资源.就是这么简单的^TM.

额外奖励:要给HR一些高度H,只需设置border-width为H/2.

Answer 15

这很简单，也是我的最爱。

<hr style="background-color: #dd3333" />