如何改变 <hr/> 元素的颜色？答案

【问题标题】：How to change color of <hr/> element?如何改变 <hr/> 元素的颜色？
【发布时间】：2014-04-18 09:45:32
【问题描述】：

我尝试了所有方法来改变<hr/>的颜色：

hr{
   border-color: yellow;
   background-color:  yellow;
   color: yellow;
  }

但在 Chrome 和 FF 中都是这样的：

如何将其颜色改为纯黄色？

【问题讨论】：

【解决方案1】：

给hr一个样式：

hr{
    border:0;
    margin:0;
    width:100%;
    height:2px;
    background:yellow;
}

或

border:1px solid yellow;

您需要删除border 或更改border 的属性才能使其正常工作。

来自 cmets 中的@Darko Z：

在许多浏览器中，HR 的默认样式是为border 添加某种阴影，所以这会显示为脏#whateverColourYouWant。为了摆脱它，明确设置边框（而不仅仅是border-color）是必要的。

【讨论】：

这是正确的。在许多浏览器中，HR 的默认样式是为边框添加某种阴影，因此这会显示为脏#whateverColourYouWant。为了摆脱它，明确设置边框（而不仅仅是边框颜色）是必要的
^ 此信息属于答案。它在 HTML 规范中吗？
@TylerH 这个边框是由浏览器默认样式添加的（有点像默认字体、填充、边距等），所以它不是 HTML 规范的一部分。只是浏览器做的事情。

【解决方案2】：

要更改水平线的颜色，请在 <hr/> 标记中输入 html 属性 color=""。然后你可以继续给它想要的颜色。

【讨论】：