CSS 解决方案
要将 HTML <hr> 元素分成多个部分，我们可以在其顶部或者底部设置边框。
如果你想让你的 <hr> 元素被分成一些不同宽度的部分，你需要试试下面的例子。
其中我们使用多个 <hr> 元素，其显示设置为“inline-block”，边框顶部指定为“solid”。
然后，我们设置每条水平线的宽度。
将 <hr> 分成宽度不同的多个部分的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.horizontal-line {
display: inline-block;
border-top: 3px solid #8b37b8;
}
.hr1 {
width: 100px;
}
.hr2 {
width: 50px;
mergin-left: 10px;
}
.hr3 {
width: 30px;
mergin-left: 10px;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<hr class='horizontal-line hr1' />
<hr class='horizontal-line hr2' />
<hr class='horizontal-line hr3' />
<p>
生活终归还得继续。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</p>
</body>
</html>
在下面的示例中，我们在 <hr> 元素上使用 border-top 属性并使用其“虚线”值。
将 <hr> 元素分成多个部分的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
hr {
border-top: 5px dashed #36a82d;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<hr>
<p>
生活终归还得继续。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</p>
</body>
</html>
日期：2020-06-02 22:15:08 来源：oir作者：oir