CSS中的hr標簽，是用來在頁面中插入一條橫線。它的作用可以是分割不同的章節或內容，也可以添加裝飾元素。 在默認情況下，hr標簽會在頁面中插入一條灰色的實線，高度為1像素。但是，在CSS的世界里，我們可以為hr標簽添加各種各樣的樣式，在視覺上達到與頁面風格和元素的美觀統一。 我們可以通過以下代碼設置水平線的顏色，粗細和樣式。

hr {
border-top: 1px solid #ccc; /* 設置上邊框 */
border-bottom: none; /* 取消下邊框 */
height: 2px; /* 設置高度 */
background-color: #eee; /* 設置顏色 */
margin: 30px 0; /* 設置外邊距 */
}

通過上面的代碼，我們可以實現以下效果：

---

如需設置不同的樣式，可以改變顏色、粗細、高度和樣式，來達到各種不同的效果。以下是一些常見的樣式： 1. 設置雙線：

hr {
border-top: 2px double #ccc;
height: 3px;
margin: 20px 0;
}

2. 設置虛線：

hr {
border-top: 1px dashed #bbb;
height: 1px;
margin: 20px 0;
}

3. 設置點線：

hr {
border-top: 1px dotted #ccc;
height: 1px;
margin: 20px 0;
}

4. 設置傾斜線：

hr {
border: none;
border-left: 2px solid #ccc;
height: 20px;
transform: rotate(45deg); /* 將線段旋轉45度 */
}

最后，要提醒一點，使用hr標簽時，其與前后元素的間距可能會受到一些默認樣式的影響，需要根據具體情況調整樣式，以保持元素間的美觀。