更改hr元素的颜色

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

hr {
    color: #123455;
}

---

#1楼

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

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

---

#2楼

• border-color可在Chrome和Safari中使用 。
• background-color可在Firefox和Opera中使用。
• color在IE7 +中有效 。

---

#3楼

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

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

---

#4楼

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

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

---

#5楼

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

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

---

#6楼

由于我没有发表评论的声誉，因此在此我将给出一些想法。

如果要使用CSS可变高度，请取消所有边框并提供背景颜色。

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

如果您只是想知道一种可以使用的样式（例如：对于大多数电子邮件客户端，在:: before元素中替换边框，或者

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

在两种方式下，如果您设置宽度，它将始终具有其大小。

无需设置display:block; 为了这。

为了安全起见，您可以将两者混合使用，因为某些浏览器可能会与height:0px;混淆height:0px; ：

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

使用此方法，您可以确保其高度至少为2px。

这是一条线，但安全就是安全。

这是您应该与几乎所有产品兼容的方法。

请记住：Gmail仅检测嵌入式CSS，某些电子邮件客户端可能不支持背景或边框。 如果失败，您仍然会有1px的线。 有总比没有好。

在最坏的情况下，您可以尝试添加color:blue; 。

在最坏的情况下，您可以尝试使用<font color="blue"></font>标记，并将珍贵的<hr/>标记放入其中。 它将继承<font></font>标签颜色。

使用这种方法，您将希望这样做： <hr width="50" align="left"/> 。

例：

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <font color="#42B3E5"><hr width="50" align="left"/></font>
    </span>
    <!--Doesn't work in ie7 and below and in Quirks Mode-->

这是供您检查的链接： http : //jsfiddle.net/sna2D/

---

#7楼

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

这样，您就可以根据需要更改高度。 祝好运。 资料来源： 如何用CSS样式化HR

---

#8楼

您应该将border-width设置为0; 它在Firefox和Chrome中运行良好。

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

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

---

#9楼

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

首先，我给HR元素提供了id="myHR"并在Java脚本中使用了它。
这是代码。

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";

---

#10楼

1. 适用于旧版IE的代码

2. 尝试了多种颜色

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

---

#11楼

我正在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" /> 

---

#12楼

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

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

 <hr noshade /> This sa test <hr noshade /> 

---

#13楼

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

默认情况下， 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"> 

---

#14楼

您可以这样做：

 hr { border: 1px solid red; } 

 <hr /> This sa test <hr /> 

---

#15楼

在阅读完所有答案并看到其中描述的复杂性之后，我开始进行一些小尝试以尝试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 。

---

#16楼

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

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

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

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

---

#17楼

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

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

---

#18楼

很简单，也是我的最爱。

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

---

#19楼

通常，不能像使用其他任何方法一样，仅使用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" />

希望这可以帮助。

---

#20楼

我以各种方式下注：

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

---

#21楼

您可以添加bootstrap bg类，例如

<hr class="bg-light" />

---

#22楼

我想如果要更改<hr>标记生成的行的color ，则应使用border-color而不是color 。

虽然，在注释中已经指出，如果您更改线条的大小，边框仍将与样式中指定的宽度一样，并且线条将被填充为默认颜色（大多数情况下这不是期望的效果）时间）。 因此，在这种情况下，您似乎还需要指定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>如果指定hr { border-color: inherit }可以将其border-color设置为其父级的color 。

---

#23楼

hr
{
  background-color: #123455;
}

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

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

---

#24楼

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

---

#25楼

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

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

---

#26楼

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

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

见小提琴 。

---

#27楼

如果您使用css类，那么它将被所有'hr'标记接受，但是如果您想要特定的'hr'，请使用以下代码，即内联css

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

如果它在chrome中不起作用，请尝试以下代码：

<hr color="red" />