<hr />的默认颜色是什么？

Question

Google没有运气，也有现有的hr颜色问题，导致如何更改hr颜色

我想创建一个与默认border颜色相同颜色的<hr>，但我不知道它的颜色是什么颜色。

有谁知道？

P.S。 - 我知道如何更改hr标签的颜色..我想在更改它之前找出它是什么

Answer 1

水平标尺的颜色取决于浏览器，但您可以获得hr元素的颜色，如下所示：

el = document.querySelector("hr");
color = window.getComputedStyle(el).getPropertyValue("border-top-color");
console.log(color);

但请注意，border-style通常是插入的，因此您获得的颜色可能与您在屏幕上看到的“真实”值不同。你想要：

• 为您的边框提供与hr
相同的边框样式
• 将hr元素的边框样式设置为solid，就像我在演示中所做的那样，以获得“真实”颜色
• 获取hr - 元素的边框样式并相应地调整颜色（可能是棘手且与浏览器无关的计算）

查看Demo，其中显示了获得相应的颜色。

Answer 2

颜色取决于浏览器/实现，因此无法知道颜色。

相反，您可以使用CSS定义<hr>元素的颜色：

hr {
    color: red;
}

现在您知道颜色是红色的！

更新：因为看起来根据浏览器需要使用color或background-color（请参阅评论）。在CSS中使用它们似乎是明智的：

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

Answer 3

w3没有为hr元素定义默认颜色（http://www.w3.org/TR/CSS21/sample.html），html5默认样式表尚未确认afaik但不应改变这一事实。

因此，每个浏览器都可以自由应用它们的默认值。

Answer 4

AFAIK它依赖于操作系统（甚至设备）---因此没有“默认的HR颜色”这样的东西。

Answer 5

请注意，某些浏览器不会将<hr>呈现为单色线。

以下是Windows上Chrome 24中<hr>左侧端的放大屏幕截图：

所以你有两种颜色可供选择。

Answer 6

同时使用color和background-color

<hr />

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

工作小提琴：http://jsfiddle.net/D2UaZ/1/

Answer 7

hr的默认颜色为黑色

Answer 8

Internet Explorer 11上的 #eee 。

Answer 9

我不确定hr标签的确切颜色，但下面的CSS代码会将颜色更改为您选择的颜色。

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