在網頁設計中，經常需要使用到<hr>標簽來顯示一條水平線。使用 CSS 可以很方便地對<hr>標簽進行樣式設置。

要設置水平線的樣式，可以使用border屬性或background屬性。下面是一些常見的設置方法。

/* 使用 border 屬性設置水平線樣式 */
hr {
border: none; /* 去掉默認邊框 */
border-top: 1px solid #ccc; /* 設置新的邊框顏色和線寬 */
margin: 10px 0; /* 設置水平線的上下外邊距 */
}
/* 使用 background 屬性設置水平線樣式 */
hr {
border: none; /* 去掉默認邊框 */
height: 1px; /* 設置水平線高度 */
background: #ccc; /* 設置水平線顏色 */
margin: 10px 0; /* 設置水平線的上下外邊距 */
}

除了上面的方法外，還可以使用偽元素::before或::after創建水平線，并對其進行樣式設置。具體方法可以參考下面的代碼示例。

/* 使用偽元素創建水平線樣式 */
hr {
visibility: hidden; /* 隱藏默認水平線 */
margin: 10px 0; /* 設置水平線的上下外邊距 */
/* 創建偽元素，實現水平線樣式 */
&:after {
content: "";
display: block;
height: 1px;
background: #ccc;
visibility: visible;
}
}

總之，在處理水平線樣式時，我們可以選擇合適的方法，根據實際設計需要來設置水平線的顏色、線寬、形狀等樣式屬性。