📅 最后修改于: 2023-12-03 15:21:35.279000 🧑 作者: Mango
当使用 hr 标签在 HTML 中创建分割线时，有时候需要添加颜色，以突出显示分割线。在本篇文章中，我们将介绍如何为 hr 标签添加颜色。
为了使分割线具有颜色，我们需要使用 CSS（层叠样式表），并将其应用于 hr 标签。
要为 hr 标签添加颜色，我们需要使用以下 CSS 代码：
hr {
height: 5px;
background-color: red;
border: none;
margin-top: 20px;
margin-bottom: 20px;
}
在这个例子中，我们设置了一个 height 属性来设置分割线的高度。 然后，我们使用 background-color 属性将背景颜色设置为红色。
我们还用 border: none; 去掉了分割线原有的边框。最后，我们使用 margin-top 和 margin-bottom 属性为分割线添加间距，使其更清晰明了。
要应用这个样式，我们需要在 HTML 中将其连接到样式表。使用以下代码将此样式添加到 HTML 中的 <head> 标记中：
<head>
<style>
hr {
height: 5px;
background-color: red;
border: none;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
现在，我们的 hr 标签将以红色显示，并带有间距，以便更好地突出分割线。
我们可以使用其他颜色选项，例如在 CSS 中使用 # 符号来指定 RGB 值或使用 color 属性来指定标准颜色名称。
下面是使用 RGB 值设置黄色颜色的示例代码：
hr {
height: 5px;
background-color: #ffcc00;
border: none;
margin-top: 20px;
margin-bottom: 20px;
}
还可以使用标准颜色名称设置颜色，例如：
hr {
height: 5px;
background-color: green;
border: none;
margin-top: 20px;
margin-bottom: 20px;
}
在 HTML 中，在 <hr> 标记中添加颜色可以帮助突出分割线。我们可以使用 CSS 设置分割线的颜色。 要应用样式，我们需要在 HTML 中将其连接到样式表。还要注意添加足够的间距，并为分割线设置高度。