CSS 如何更改 hr 元素的颜色

9 个月前提问

5 个月前修改

浏览次数84次

6个答案

在HTML中，<hr> 元素用于表示主题区域中的话题分隔或段落间的断开。在默认情况下，<hr> 元素会显示为一个水平线，它的样式可以通过CSS进行定制，包括颜色的修改。

要更改<hr>元素的颜色，您可以通过为其设置CSS样式来完成。这里有几种方法可以实现：

您可以直接在<hr>标签中使用style属性来设置颜色：

html
<hr style="border: none; height: 2px; background-color: #ff0000;" />

在这个例子中，我们设定了<hr>的border属性为none以移除默认的边框样式，height设置了线条的粗细，background-color设置了颜色为红色（#ff0000）。

您还可以在HTML文档的<head>部分用<style>标签定义CSS规则，或者在外部的CSS文件中定义，并链接到HTML文档。

在HTML文档的<head>部分:

html
<style>
    hr.customHr {
        border: none;
        height: 2px;
        background-color: #ff0000; /* 红色 */
    }
</style>

然后在HTML体中应用这个类：

html
<hr class="customHr" />

在外部的.css文件中:

css
.customHr {
    border: none;
    height: 2px;
    background-color: #ff0000; /* 红色 */
}

在HTML文档中链接这个CSS文件：

html
<link rel="stylesheet" type="text/css" href="styles.css" />

然后在HTML体中应用这个类：

html
<hr class="customHr" />

在最新的HTML和CSS规范中，建议使用background-color而不是border-color来改变<hr>的颜色，因为<hr>通常被视为块级元素，其边框颜色可能不会产生预期效果。
为了确保兼容性和一致的表现，在改变颜色前先移除或重置border属性是个好习惯。

以上就是如何更改<hr>元素颜色的几种方法。

2024年6月29日 12:07 回复

我认为如果您的目的是更改标签生成的线条的颜色，您应该使用border-color代替。color``<hr>

尽管如此，评论中指出，如果更改线条的大小，边框仍将与您在样式中指定的宽度一样宽，并且线条将用默认颜色填充（这不是大多数情况下所需的效果）时间）。因此，在这种情况下，您似乎还需要指定background-color（如@Ibu 建议的那样）。

HTML 5 Boilerplate项目在其默认样式表中指定了以下规则：

shell
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

SitePoint 最近发表的一篇题为“12 个鲜为人知的 CSS 事实”的文章提到，如果您指定，则<hr>可以将其设置border-color为其父级。color``hr { border-color: inherit }

2024年6月29日 12:07 回复

2024年6月29日 12:07 回复

我认为这很有用。这是简单的 CSS 选择器。

shell
hr { background-color: red; height: 1px; border: 0; }

<hr>

运行代码片段Hide results

展开片段

2024年6月29日 12:07 回复

hr { height: 1px; color: #123455; background-color: #123455; border: none; }

通过这种方式，您可以根据需要更改高度。祝你好运。资料来源：如何使用 CSS 设计 HR 样式

2024年6月29日 12:07 回复

在 Firefox、Opera、Internet Explorer、Chrome 和 Safari 中进行了测试。

shell
hr {
    border-top: 1px solid red;
}

2024年6月29日 12:07 回复