CSS中的分割線是一種很常見的效果，可以用在各類網(wǎng)站中。最常見的情況是我們需要為頁面的不同部分添加一個分割線，以便于用戶清晰地區(qū)分每個部分。CSS提供了許多簡便的方法來實現(xiàn)這種效果，其中之一就是多行分割線。

hr {
display: block;
border: none;
height: 1px;
background: black;
background-image: linear-gradient(to right, #ccc, #000, #ccc);
}

上述代碼中的hr元素就是一個默認(rèn)的水平分割線，用border:none;將默認(rèn)的邊框去掉，用height:1px;設(shè)置分割線的高度為1像素。最重要的是background-image屬性，我們使用linear-gradient函數(shù)來生成漸變的背景顏色，這樣就能讓單一顏色的分割線更加生動和有趣了。to right是線性漸變的方向，從左至右。#ccc、#000和#ccc分別是線性漸變的三個顏色，從淺到深。

要使用多行分割線，我們只需要將hr元素設(shè)置為display:block;而不是默認(rèn)的display:inline-block;即可。這樣一來，多個hr元素不會擠在同一行，而是會自動換行。這種方法幾乎不需要任何額外的設(shè)置，快捷簡便，非常適用于那些需要分隔不同模塊的網(wǎng)頁。例如：

模塊1
這是模塊1的內(nèi)容。
模塊2
這是模塊2的內(nèi)容。
模塊3
這是模塊3的內(nèi)容。

上述代碼就是一個簡單的例子，三個不同的模塊之間用分割線分隔開來，看上去整齊清晰。

總結(jié)：使用CSS多行分割線可以極大地提高網(wǎng)頁的可讀性和美觀度。有很多方式可以實現(xiàn)這一效果，而最常用的方法就是設(shè)置hr元素的display為block，一旦設(shè)置成功，分割線自然就可以實現(xiàn)多行分隔了。