创建 HTML
- 使用两个 <p> 元素并在它们之间添加一个 <hr> 元素。
<p> 经历过风雨，才懂得阳光的温暖。 </p> <hr> <p> 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。 经历过风雨，才懂得阳光的温暖。 </p>
添加 CSS
- 指定高度和背景颜色属性。
- 将边框设置为“无”。
hr {
height: 2px;
background-color: #ff0000;
border: none;
}
让我们看看最终的代码。
使用 background-color 属性为 <hr> 标签添加颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
hr {
height: 2px;
background-color: #ff0000;
border: none;
}
</style>
</head>
<body>
<p>
经历过风雨，才懂得阳光的温暖。
</p>
<hr>
<p>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</p>
</body>
</html>
让我们看另一个例子。
使用 border-top 属性为 <hr> 标签添加颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
hr {
display: block;
height: 1px;
border: 0;
border-top: 3px solid #2c03fc;
margin: 1em 0;
padding: 0;
}
</style>
</head>
<body>
<p>
Hello World
</p>
<hr>
<p>
经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</p>
</body>
</html>
HTML <hr> 元素是块级元素，代表一条水平线。
它创建了一条水平线。
我们可以通过添加颜色来设置水平线的样式。
这将使用户界面更具吸引力。
可以通过添加 background-color 属性来实现。
此外，我们可以通过 border-top 属性指定水平线的颜色。
在此代码中，我们可以找到一些向 <hr> 标记添加颜色的示例。
日期：2020-06-02 22:15:06 来源：oir作者：oir