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

Posted 2023-03-21

【中文标题】如何改变 <hr/> 元素的颜色？

【英文标题】：How to change color of <hr/> element?

【发布时间】：2014-04-18 09:45:32

【问题描述】：

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

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

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

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

【问题讨论】：

一些进一步的上下文会有所帮助。您能否向我们展示一些 html 和 CSS 代码，以便我们确定您页面中发生的一切？

@TylerH 谢谢！但似乎答案太容易了！只是border:0！

这能回答你的问题吗？ Changing the color of an hr element

【参考方案1】：

给hr一个样式：

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

或

border:1px solid yellow;

JsFiddle

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

来自 cmets 中的@Darko Z：

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

【讨论】：

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

^ 此信息属于答案。它在 HTML 规范中吗？

@TylerH 这个边框是由浏览器默认样式添加的（有点像默认字体、填充、边距等），所以它不是 HTML 规范的一部分。只是浏览器做的事情。

【参考方案2】：

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