在HTML页面布局中，水平线是分隔不同内容区块的常用元素，HTML提供了原生的<hr>标签来实现水平线的插入，同时我们可以通过CSS对水平线的外观进行自定义调整，满足不同的页面设计需求。
hr标签的基本用法
<hr>是HTML中的空标签，不需要闭合标签，直接在需要插入水平线的位置添加该标签即可，默认情况下浏览器会渲染出一条灰色的细水平线，带有一定的上下边距。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>hr标签基本用法</title>
</head>
<body>
<h3>区块一</h3>
<p>这是第一个内容区块</p>
<hr>
<h3>区块二</h3>
<p>这是第二个内容区块</p>
</body>
</html>自定义hr标签的样式
hr标签的默认样式比较单一，我们可以通过CSS修改它的各类属性，实现不同的视觉效果，下面介绍几种常见的自定义场景。
修改水平线的颜色和粗细
默认的水平线是灰色细线，我们可以通过border-color设置颜色，border-width设置粗细，同时需要先将默认的上边框清除，避免样式冲突。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义颜色和粗细</title>
<style>
.custom-hr {
border: none; /* 清除默认边框 */
border-top: 3px solid #ff6700; /* 设置上边框粗细和颜色 */
width: 80%; /* 设置水平线宽度 */
margin: 20px auto; /* 设置上下边距和水平居中 */
}
</style>
</head>
<body>
<h3>自定义颜色和粗细的水平线</h3>
<hr class="custom-hr">
<p>下方是其他内容</p>
</body>
</html>设置虚线或点线样式
除了实线样式，我们还可以通过border-style属性将水平线设置为虚线或者点线，常见的值有dashed（虚线）、dotted（点线）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>虚线和点线水平线</title>
<style>
.dashed-hr {
border: none;
border-top: 2px dashed #333;
width: 70%;
margin: 20px auto;
}
.dotted-hr {
border: none;
border-top: 2px dotted #666;
width: 70%;
margin: 20px auto;
}
</style>
</head>
<body>
<h3>虚线水平线</h3>
<hr class="dashed-hr">
<h3>点线水平线</h3>
<hr class="dotted-hr">
</body>
</html>添加渐变效果的水平线
如果想要水平线有渐变色彩，可以使用linear-gradient线性渐变配合background属性实现，这种方式可以做出更丰富的视觉效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>渐变水平线</title>
<style>
.gradient-hr {
border: none;
height: 2px; /* 设置高度作为渐变的显示区域 */
width: 90%;
margin: 20px auto;
background: linear-gradient(to right, #ff0000, #ffff00, #00ff00); /* 从左到右的渐变 */
}
</style>
</head>
<body>
<h3>渐变色彩水平线</h3>
<hr class="gradient-hr">
<p>渐变水平线可以让页面更活泼</p>
</body>
</html>注意事项
- 修改hr样式时建议先清除默认的
border属性，避免默认样式干扰自定义效果。 - 如果需要兼容老版本浏览器，渐变效果可以添加对应的浏览器前缀，比如
-webkit-linear-gradient。 - 水平线的宽度可以用百分比或者固定像素值设置，百分比是相对于父容器的宽度。