更改hr元素的颜色

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

hr {
    color: #123455;
}

我想您应该使用border-color代替color，如果您的意图是更改由...产生的线条的颜色<hr> tag。

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

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

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

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

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

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

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

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

见小提琴。

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

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

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

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

hr
{
  background-color: #123455;
}

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

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

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

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

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

<hr color="red" />

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

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

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

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

您应该将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" />

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

如果要使用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;：

    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/

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

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

好吧，我是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";

1. 适用于旧版IE的代码

2. 尝试了多种颜色

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

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

该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 {
  border: 1px solid red;
}

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

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

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

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

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

“颜色：＃123455”

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

“背景颜色：＃123455”

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

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

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

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

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

希望这可以帮助。

我以各种方式下注：

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