Html 更改 hr 元素的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6382023/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the color of an hr element
提问by koool
I want to change the color of my hrtag using CSS. The code I've tried below doesn't seem to work:
我想hr使用 CSS更改标签的颜色。我在下面尝试过的代码似乎不起作用：
hr {
color: #123455;
}
回答by Anton Strogonoff
I think you should use border-colorinstead of color, if your intention is to change the color of the line produced by <hr>tag.
我认为你应该使用border-color而不是color, 如果你的目的是改变<hr>标签产生的线条的颜色。
Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be filled with the default color (which is not a desired effect most of the time). So it seems like in this case you would also need to specify background-color(as @Ibu suggested in his answer).
虽然，评论中已经指出，如果您更改线条的大小，边框仍将与您在样式中指定的一样宽，并且线条将填充为默认颜色（大多数情况下这不是预期的效果）时间）。因此，在这种情况下，您似乎还需要指定background-color（正如@Ibu 在他的回答中所建议的那样）。
HTML 5 Boilerplateproject in its default stylesheet specifiesthe following rule:
HTML 5 Boilerplate项目在其默认样式表中指定以下规则：
hr { display: block; height: 1px;
border: 0; border-top: 1px solid #ccc;
margin: 1em 0; padding: 0; }
An articletitled “12 Little-Known CSS Facts”, published recently by SitePoint, mentions that <hr>can set its border-colorto its parent's colorif you specify hr { border-color: inherit }.
文章题为“12鲜为人知的CSS事实”，最近由SitePoint公布，提到<hr>可以设置它border-color给其父是color，如果你指定hr { border-color: inherit }。
回答by Cameron
border-colorworks in Chromeand Safari.background-colorworks in Firefox and Opera.colorworks in IE7+.
border-color适用于Chrome和Safari。background-color适用于 Firefox 和 Opera。color适用于IE7+。
回答by Omm
I think this can be useful. this was simple CSS selector.
我认为这很有用。这是一个简单的 CSS 选择器。
hr { background-color: red; height: 1px; border: 0; }
回答by Studio3
hr {
height: 1px;
color: #123455;
background-color: #123455;
border: none;
}
Doing it this way allows you to change the height if needed. Good luck. Source: How To Style HR with CSS
这样做可以让您在需要时更改高度。祝你好运。来源：如何使用 CSS 为 HR 设计样式
回答by Eric Fortis
Tested in Firefox, Opera, Internet Explorer, Chrome and Safari.
在 Firefox、Opera、Internet Explorer、Chrome 和 Safari 中测试。
hr {
border-top: 1px solid red;
}
见小提琴。
回答by Kathir
Only border-top with color is enough to make the line in different color.
只有带颜色的边框顶部足以使线条具有不同的颜色。
hr {
border-top: 1px solid #ccc;
}
回答by Brian McCall
hr {
height:0;
border:0;
border-top:1px solid #083972;
}
This will keep the Horizontal Rule 1px thick while also changing the color of it
这将使水平规则保持 1px 厚，同时也会改变它的颜色
回答by Joao Alves Marrucho
I believe this is the most effective approach:
我认为这是最有效的方法：
<hr style="border-top: 1px solid #ccc; background: transparent;">
Or if you prefer doing it on all hr elements write this on you CSS:
或者，如果您更喜欢在所有 hr 元素上执行此操作，请将其写在您的 CSS 上：
hr {
background-color: transparent;
border-top: 1px solid #ccc;
}
回答by sushil bharwani
hr
{
color: #f00;
background-color: #f00;
height: 5px;
}
回答by Ibu
hr
{
background-color: #123455;
}
the background is the one you should try to change
背景是你应该尝试改变的背景
You can also work with the borders color. i am not sure i think there are crossbrowser issues with this. you should test it in differrent browsers
您还可以使用边框颜色。我不确定我认为这是否存在跨浏览器问题。你应该在不同的浏览器中测试它
