水平线是CSS常用的一个样式，其主要作用是用于在页面中创建水平的分割线，使得部分内容具有更好的阅读性和排版美感。水平线是可以应用到多种不同的场景中，比如用于分隔文章的不同段落、用于划分页面的不同部分等等。在CSS中，可以通过多种方式来创建水平线，接下来我们就来详细介绍一下这些方法和对应的代码。

/* 使用border属性创建水平线 */
hr {
border: none;
border-top: 1px solid #ddd;
}
/* 使用伪元素 ::before 或 ::after 创建水平线 */
section::before {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: #ddd;
}
/* 使用 background-image 属性创建水平线 */
.hr-line {
height: 1px;
background-image: linear-gradient(to right, #ccc, #ccc 50%, transparent 50%, transparent);
background-size: 200% 100%;
animation: hr-animation 1s ease infinite;
}
@keyframes hr-animation {
to { background-position: -100% center; }
}

以上三种方法分别是使用border属性、伪元素和background-image属性来创建水平线。其中，使用border属性的方法比较简单，只需要给hr元素添加一个上边框即可。而使用伪元素的方法，则是使用一个空的 ::before 或 ::after 伪元素，设置其宽度和高度，并且指定一个背景颜色即可。最后一种方法则是通过background-image属性来创建水平线，使用线性渐变来实现。其中，通过添加一个动画效果，可以让水平线具有比较流畅的过渡效果。

以上三种方法的代码虽然不同，但是它们的效果都是类似的，都是在页面中创建了一条水平的分割线。在实际开发中，我们可以根据具体的需求选择合适的方法，来创建出最适合的水平线样式。同时，在设置水平线的样式时，我们还可以通过指定线条的样式、颜色、宽度等参数，来进一步控制水平线的外观。不过需要注意的是，使用水平线时也需要适度，过多的水平线会给页面带来杂乱的感觉，影响阅读体验。