更改hr元素的颜色

小开

最佳答案

我认为你应该使用border-color而不是color，如果你的意图是改变<hr>标签产生的线的颜色。

虽然，有评论指出，如果你改变线条的大小，边框仍然会和你指定的样式一样宽，并且线条会被默认颜色填充（大多数时候这不是一个理想的效果）。所以在这种情况下，你似乎还需要指定background-color（正如@Ibu在他的回答中建议的那样）。

超文本标记语言5样板项目在其默认样式表指定以下规则：

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。

小开

hr {background-color: #123455;}

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

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

小开

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

小开

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

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

小开

测试在Firefox，Opera，Internet Explorer，Chrome和Safari。

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

看小提琴

小开

如果你使用css类，那么它将被所有'hr'标签占用，但如果你想要一个特定的'hr'，请使用下面的代码，即内联css

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

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

<hr color="red" />

小开

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

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

<hr>

小开

border-color在Chrome和Safari中工作。
background-color适用于Firefox和Opera。
color在ie7+中工作。

小开

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

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

<hr>

小开

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

该代码将显示垂直灰线。

小开

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

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

小开

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

如果你想要一个css可变高度，去掉所有的边框并给一个背景颜色。

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

如果你只是想要一个你知道可以工作的样式（例如：为大多数电子邮件客户端替换::bef元素中的边框或

    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/

小开

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

这样做可以让你在需要时改变高度。祝你好运。来源：如何使用CSS创建HR样式

小开

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

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

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

小开

好吧，我是超文本标记语言，CSS和Java的新手，但我尝试了在所有浏览器中适用的方法。我使用JS而不是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";

小开

代码适用于较旧的IE
尝试多种颜色
```
<hr color="black"><hr color="blue">
```

小开

我正在测试IE，Firefox和Chrome2015年5月，这与当前版本最有效。它以人力资源为中心，使其70%宽：

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

<hr class="light" />

小开

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

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

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

小开

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

默认情况下，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。而且，结论是，你可以扔掉你写的大部分猴子补丁的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。

小开

我认为这是最有效的方法：

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

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

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

小开

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

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

小开

作为一般规则，您不能像其他任何东西一样使用CSS设置水平线的颜色。首先，Internet Explorer需要CSS中的颜色如下：

"颜色：#123455"

但是Opera和Mozilla需要CSS中的颜色才能像这样阅读：

msgstr"背景颜色：#123455"

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

接下来，您需要为水平线提供一些尺寸，否则它将默认为浏览器设置的标准高度、宽度和颜色。这是一个示例代码，说明您的CSS应该是什么样子才能获得蓝色水平线。

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

或者，您可以在插入水平线时直接将样式添加到超文本标记语言页面，如下所示：

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

希望这有帮助。

小开

我用每种方式打赌：

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

小开

您可以添加引导bg类，例如

<hr class="bg-light" />

小开

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