什么是默认颜色 ?

Question

谷歌没有运气，也存在hr颜色问题，导致如何改变hr颜色

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

有谁知道？

附： - 我知道如何更改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

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

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

Answer 3

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

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

hr {
    color: red;
}

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

更新：似乎根据浏览器需要使用color或background-color（请参阅注释）。在CSS中同时使用它们似乎是明智的：

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

Answer 4

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

Answer 5

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

这是在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; }