改变hr元素的颜色

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

 hr { color: #123455; } 

Answer 1

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

虽然，有人指出，如果你改变你的线的大小，边框仍然会像你在样式中指定的一样宽，并且线将被填充默认颜色（这不是所期望的效果）时间）。 所以在这种情况下，你似乎也需要指定background-color （就像@Ibu在他的回答中所build议的那样）。

默认样式表中的HTML 5 Boilerplate项目指定了以下规则：

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

如果您指定hr { border-color: inherit } ，那么最近由SitePoint发布的标题为“12个已知CSS事实”的文章提到<hr>可以将border-color设置为其父color 。

Answer 2

在Chrome和Safari中可以使用 border-color
background-color在Firefox和Opera中可用
color在IE7 +中起作用

Answer 3

我认为这可能是有用的。 这是简单的CSSselect器。

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

Answer 4

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

这样做可以让你改变高度，如果需要的话。 祝你好运。 资料来源： 如何用CSS来deviseHR

Answer 5

在ff，歌剧，即铬和safaritesting

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

看小提琴http://jsfiddle.net/HPSjU/

Answer 6

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

这将保持横向规则1px厚，同时也改变它的颜色

Answer 7

只有边框与颜色足以使线条以不同的颜色。

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

Answer 8

 小时
 {
颜色：＃f00;
 background-color：＃f00;
身高：5px;
 }

Answer 9

我正在testingIE，Firefox和Chrome 2015年5月，这与目前的版本效果最好。 它把人力资源中心放在了70％的范围内：

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

 <hr class="light" /> 

Answer 10

你应该设置边界宽度为0; 它在Firefox和Chrome中运行良好。

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

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

Answer 11

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

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

如果它不在chrome中工作，请尝试下面的代码：

 <hr color="red" /> 

Answer 12

 hr { background-color: #123455; } 

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

您也可以使用边框颜色。 我不知道我认为这是与crossbrowser问题。 你应该在不同的浏览器中testing它

Answer 13

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

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

Answer 14

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

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

或者，如果你喜欢在所有人力资源元素上进行操作，请在这里写下CSS：

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

Answer 15

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

如果你想要一个cssvariables高度，请取下所有边框并给出背景颜色。

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

如果你只想要一个你知道可以工作的样式（例如：replace大多数电子邮件客户端或者

  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*/ } 

有了这个方法，你可以确定它至less有2px的高度。

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

这是你应该用来兼容几乎所有的方法。

记住：Gmail只能检测内联css，有些电子邮件客户端可能不支持背景或边框。 如果失败了，你仍然会有一个1px的行。 有总比没有好。

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

在最糟糕的情况下，您可以尝试使用<font color="blue"></font>标签，并将贵重的<hr/>标签放在里面。 它将inheritance<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 16

在阅读了这里的所有答案之后，看到所描述的复杂性，我尝试了一些小小的尝试人力资源的尝试。 而且，结论是，你可以抛出大部分你写的monkeypatched CSS，阅读这个小小的引子 ，只是使用这两行纯CSS：

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

这就是所有你需要风格的人力资源。

• 作品跨浏览器，跨设备，跨操作系统，跨英语频道，跨年龄。
• 不， “我认为这会起作用…” ， “你需要记住Safari / IE ……”等等。
• 没有额外的CSS – 没有height ， width ， background-color ， color等涉及。

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

---

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

Answer 17

这很简单，我最喜欢的。

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

Answer 18

你可以使用CSS来创build一个不同颜色的线，例如：

 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 19

那么，我是新的HTML，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"; 

Answer 20

1. 代码适用于较旧的IE

2. 为许多颜色尝试

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

Answer 21

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

color属性在默认情况下不会被inheritance，所以需要将下面的内容添加到hr中以允许颜色inheritance：

 /* 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 22

你可以这样做：

 hr { border: 1px solid red; } 

 <hr /> This sa test <hr /> 

Answer 23

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

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

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

Answer 24

你也可以使用字体标签例如

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