CSS更改hr标签的颜色[重复]

Posted 2023-03-21

【中文标题】CSS更改hr标签的颜色[重复]

【英文标题】：CSS change color of hr tag [duplicate]

【发布时间】：2012-04-04 02:59:00

【问题描述】：

可能重复：CSS : change color of hr tag

如何更改 hr 标签的颜色？我查了一下，发现了这个，但是没有用..

hr
    color:#CCC;
    background-color:#CCC;

有什么想法吗？

【参考方案1】：

设置边框样式。

hr
   border: 1px solid #ccc;

【讨论】：

这将返回一条高度为 2px 的行。这是因为它有一个顶部和一个底部边框，简单的解决方案是设置0.5px或在border-top中设置信息。

@ElishaSterngold 好点！我认为只设置边界顶部会更好。我通常对设置亚像素持谨慎态度，因为它实际上是在浏览器上来解释如何呈现它。

【参考方案2】：

只需更改边框颜色。例如，这个 html 生成一个红色的水平行。

<hr style="border: 1px solid #f00" />​

【参考方案3】：

尝试改变它的边框颜色

【参考方案4】：

添加自定义样式以在 crossbrowser 方式中显示水平规则的最佳方法可能是设置以下元素的边框顶部（或前一个元素的边框底部）的样式

另一种解决方案是设置 <hr> 相邻/兄弟元素之一的 :after 或 :before 伪元素的样式

【参考方案5】：

试试这个：

<hr noshade="noshade" />

作为您的 hr 标签，然后使用与您已有的相同的 CSS。

编辑：

你也可以加

border: 1px solid #CCC;

到您的 CSS。