更改 hr 元素的颜色

如果您打算更改由 <hr> 标记产生的线条的颜色，我认为您应该使用 border-color 而不是 color。

虽然，在评论中已经指出，如果您更改线条的大小，边框仍将与您在样式中指定的一样宽，并且线条将使用默认颜色填充（大多数情况下这不是预期的效果）时间）。因此，在这种情况下，您似乎还需要指定 background-color （正如@Ibu 在他的回答中所建议的那样）。

HTML 5 Boilerplate 项目在其默认样式表specifies中遵循以下规则：

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

一篇标题为 “12 Little-Known CSS Facts” 的文章，最近由 SitePoint 发表，提到如果您指定 hr { border-color: inherit }，<hr> 可以将其 border-color 设置为其父级的 color。

---

边框颜色适用于 Chrome 和 Safari。

背景颜色适用于 Firefox 和 Opera。

颜色适用于 IE7+。

---

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

hr { 背景颜色：红色；高度：1px；边框：0； } <小时>

---

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

这样做可以让您在需要时更改高度。祝你好运。来源：How To Style HR with CSS

---

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

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

See the Fiddle。

---

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

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

---

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

hr { 边框顶部：1px 实心 #ccc; } <小时>

---

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

---

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

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

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

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

---

hr {
  background-color: #123455;
}

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

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

---

在阅读了这里的所有答案并看到了所描述的复杂性之后，我开始了一个小小的转移来尝试 HR。而且，结论是你可以扔掉你写的大部分猴子补丁CSS，阅读这个小primer，只使用这两行纯CSS：

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

这就是你为你的人力资源设计风格所需要的一切。

跨浏览器、跨设备、跨操作系统、跨英语频道、跨年龄工作。

没有“我认为这行得通……”、“你需要记住 Safari/IE……”等等。

没有额外的 CSS - 不涉及高度、宽度、背景颜色、颜色等。

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

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

---

您可以添加 bootstrap bg 类，例如

<hr class="bg-light" />

---

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

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

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

<hr color="red" />

---

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

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

---

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

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

---

我正在 2015 年 5 月在 IE、Firefox 和 Chrome 上进行测试，这在当前版本中效果最佳。它以 HR 为中心，使其宽度为 70%：

hr.light { 宽度：70%;边距：0 自动；边框：0px 非白色；边框顶部：1px 纯浅灰色； }

---

---

您应该将边框宽度设置为 0；它在 Firefox 和 Chrome 中运行良好。

hr {明确：两者；红色;背景颜色：红色；高度：1px；边框宽度：0； }

---

这是一个测试

---

---

由于我没有评论的声誉，我将在这里给出一些想法。

如果你想要一个 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);

该代码将显示垂直灰线。

---

我喜欢设置边界顶部的答案，但它们在 Chrome 中仍然有点偏离...
但是如果我设置 border-top: 1px solid black; 和 border-bottom: 0px;，我最终会得到一个 真正 单线（这也适用于更高的厚度）。

---

好吧，我是 HTML、CSS 和 Java 方面的新手，但我尝试了适用于所有浏览器的方法。我使用了 JS 而不是 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";

---

代码适用于尝试多种颜色的旧 IE

---

---

---

使用字体颜色来修改水平规则使它们更加灵活和易于使用。

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

/* 允许 hr 继承颜色 */ hr { border: 1px solid;} /* 可重复使用的颜色修饰符 */ .fc_-alpha { color: crimson;} normal hr:

---

hr with 颜色修饰符:

---

---

你可以这样做：

hr { 边框：1px 纯红色； }

---

这个 sa 测试

---

---

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

hr { 边界顶部：0；颜色：#123455； }

---

这个 sa 测试

---

---

作为一般规则，您不能像其他任何东西一样使用 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" />

希望这可以帮助。

---

我在各个方面都打了个赌：

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

---