如何更改<hr/>元素的颜色？

Question

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

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

但在Chrome和FF中，它看起来是这样的：

我该如何将其颜色更改为纯黄色？

- Majid

---

一些更多的上下文会很有帮助。你能给我们展示一些HTML和CSS代码，这样我们就可以确定页面中发生的一切吗？ - TylerH

@TylerH 谢谢！但答案似乎太简单了！只需要 border:0! - Majid

这个回答解决了你的问题吗？更改hr元素的颜色 - Jon Schneider

Answer 1

使用以下代码为 hr 添加样式：

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

border:1px solid yellow;

JsFiddle

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

从@Darko Z在评论中说：

在许多浏览器中，HR的默认样式是向border添加某种阴影，因此会出现污秽的 #whateverColourYouWant。要消除它，必须明确设置边框（而不仅仅是border-color）。

- Albzi

---

没问题。在许多浏览器中，HR元素的默认样式是为边��添加某种阴影效果，导致其呈现出脏兮兮的 #任何你想要的颜色。要去掉这个效果，需要显式地设置边框（而不仅仅是边框颜色）。 - Darko

这个信息应该放在答案里。它在HTML规范中吗？ - TylerH

@TylerH 这个边框是由浏览器的默认样式添加的（类似于默认字体、填充、边距等），因此它不是 HTML 规范的一部分。这只是浏览器的一个特性。 - Darko

Answer 2

要更改水平线的颜色，在您的<hr/>标签中，输入HTML属性color=""。然后您可以为其设置所需的颜色。

- Aaron nevalinz