更改 hr 元素的颜色

Question

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

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: inherit } ， <hr>可以将其border-color设置为其父级的color 。

Answer 2

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

Answer 3

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

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

 <hr>

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

这将保持 Horizo​​ntal Rule 1px 厚，同时改变它的颜色：

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

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

hr {
  background-color: #123455;
}

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

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

Answer 11

您可以添加 bootstrap bg 类，例如

<hr class="bg-light" />

Answer 12

在阅读了此处的所有答案并看到所描述的复杂性后，我开始进行小规模的 HR 试验。 而且，结论是你可以扔掉你写的大部分monkeypatched CSS，阅读这个小入门书，只使用这两行纯CSS：

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

这就是您为 HR 设计风格所需的全部内容。

• 跨浏览器、跨设备、跨操作系统、跨英文频道、跨时代工作。
• 不， “我认为这会奏效……” 、 “您需要牢记 Safari/IE……”等。
• 没有额外的 css - 不涉及height 、 width 、 background-color 、 color等。

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

---

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

Answer 13

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

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

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

<hr color="red" />

Answer 14

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

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

Answer 15

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

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

Answer 16

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

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

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

Answer 17

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

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

 <hr class="light" />

Answer 18

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

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

Answer 19

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

该代码将显示垂直灰线。

Answer 20

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

Answer 21

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

Answer 22

1. 代码适用于较旧的 IE

2. 试过多种颜色

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

Answer 23

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

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

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

Answer 24

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

默认情况下不继承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">

Answer 25

你可以这样做：

 hr { border: 1px solid red; }

 <hr /> This sa test <hr />

Answer 26

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

希望这可以帮助。

Answer 27

我以各种方式下注：

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

Answer 28

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

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