更改hr元素的颜色

我以各种方式下注：

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

通常，不能像其他任何事情一样，仅使用CSS设置水平线的颜色。首先，Internet Explorer需要CSS中的颜色如下所示：

“颜色：＃123455”

但是Opera和Mozilla需要CSS中的颜色如下所示：

“背景颜色：＃123455”

因此，您需要将两个选项都添加到CSS中。

接下来，您需要为水平线提供一些尺寸，否则它将默认为浏览器设置的标准高度，宽度和颜色。这是您的CSS看起来像蓝色水平线的示例代码。

hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}

或者，您也可以在插入水平线时直接将样式添加到HTML页面，如下所示：

<hr style="background:#123455" />

希望这可以帮助。

您也可以使用字体标签，例如

<font color="red"><hr></font>

使用字体颜色修改水平线使其更加灵活和易于使用。

该color属性默认情况下不被继承，因此需要将以下内容添加到hr中以允许颜色继承：

/* allow hr to inherit color */
hr { border: 1px solid;}

/* reusable colour modifier */
.fc_-alpha { color: crimson;}

normal hr:

<hr>

hr with <span class="fc_-alpha">colour modifier</span>:

<hr class="fc_-alpha">

您可以给<hr noshade>标签并转到您的css文件并添加：

hr {
    border-top:0;
    color: #123455;
}

<hr noshade />
This s a test
<hr noshade />

您可以这样做：

hr {
  border: 1px solid red;
}

<hr />
This s a test
<hr />

1. 适用于旧版IE的代码

2. 尝试了多种颜色

   <hr color="black">
   <hr color="blue">
   

好吧，我是HTML，CSS和Java的新手，但我尝试了对所有浏览器都有效的方式。我用JS代替了CSS ， CSS 在某些浏览器上不起作用。

首先，我介绍id="myHR"了HR元素并在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制作具有不同颜色的线，示例如下所示：

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; 它在Firefox和Chrome中运行良好。

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

<hr />
This is a test
<hr />

很简单，也是我的最爱。

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

您可以添加bootstrap bg类，例如

<hr class="bg-light" />

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

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

在阅读完所有答案并了解其中描述的复杂性之后，我开始进行一些小尝试以尝试HR。并且得出的结论是，您可以扔掉您编写的大多数猴子修补CSS，阅读此入门文章，然后仅使用这两行纯CSS：

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

这就是您设计人力资源所需的全部。

• 跨浏览器，跨设备，跨操作系统，跨英语渠道，跨年龄的作品。
• 没有“我认为这行得通...”，“您需要牢记Safari / IE ...”等。
• 没有额外的CSS -不height，width，background-color，color，等参与。

只是防弹多彩HR。就是这么简单的^TM。

奖励：要给HR一些身高H，只需将设置border-width为即可H/2。

我正在IE，Firefox和Chrome浏览器上进行测试（2015年5月），这在当前版本中效果最好。它使HR居中并使其宽度达到70％：

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}

<hr class="light" />

hr
{
  background-color: #123455;
}

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

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

小时
{
颜色：＃f00;
背景颜色：＃f00;
高度：5px；
}

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

这将使水平线保持1px的厚度，同时更改其颜色

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

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

或者，如果您更喜欢在所有hr元素上执行此操作，请在CSS上编写以下代码：

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

在Firefox，Opera，Internet Explorer，Chrome和Safari中进行了测试。

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

见小提琴。

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

这样，您可以根据需要更改高度。祝好运。资料来源：如何使用CSS设置人力资源风格

我认为这很有用。这是简单的CSS选择器。

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

仅带颜色的边框顶部足以使线变为不同的颜色。

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

I think you should use border-color instead of color, if your intention is to change the color of the line produced by <hr> tag.

Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be filled with the default color (which is not a desired effect most of the time). So it seems like in this case you would also need to specify background-color (as @Ibu suggested in his answer).

HTML 5 Boilerplate project in its default stylesheet specifies the following rule:

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

SitePoint最近发表了一篇标题为“ 12个鲜为人知的CSS事实”的文章，其中提到，如果您指定，<hr>可以将其设置border-color为其父对象的CSS事实。colorhr { border-color: inherit }

• border-color可在Chrome和Safari中使用。
• background-color 在Firefox和Opera中均可使用。
• color在IE7 +中工作。