水平線是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屬性來創建水平線，使用線性漸變來實現。其中，通過添加一個動畫效果，可以讓水平線具有比較流暢的過渡效果。

以上三種方法的代碼雖然不同，但是它們的效果都是類似的，都是在頁面中創建了一條水平的分割線。在實際開發中，我們可以根據具體的需求選擇合適的方法，來創建出最適合的水平線樣式。同時，在設置水平線的樣式時，我們還可以通過指定線條的樣式、顏色、寬度等參數，來進一步控制水平線的外觀。不過需要注意的是，使用水平線時也需要適度，過多的水平線會給頁面帶來雜亂的感覺，影響閱讀體驗。