在網頁中，經常需要用到水平線來分割不同內容。默認情況下，水平線樣式比較單一，不能滿足設計要求，因此我們需要用CSS來改裝水平線。

hr {
height: 2px;
background-color: #ccc;
border: none;
margin: 20px 0;
}

以上是CSS改裝水平線的基本樣式代碼。首先將默認高度設為2像素，背景顏色設為灰色，去掉邊框線條，然后加上上下20像素的外邊距。

.lr {
background: #ccc;
border: none;
height: 1px;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
}
.lr::before {
content: '';
width: 10%;
height: 1px;
background: #ccc;
position: absolute;
left: 0;
top: 0;
}
.lr::after {
content: '';
width: 10%;
height: 1px;
background: #ccc;
position: absolute;
right: 0;
top: 0;
}

以上是另一種改裝水平線的樣式代碼。這種效果會呈現中間高，兩端低的效果，給人眼前一亮的感覺。這需要用到偽類選擇器，::before 和 ::after 來實現中間高低端的效果。

當然，還有很多種不同的改裝水平線的樣式，只要我們熟練掌握CSS樣式和偽類的使用，可以實現自己想要的效果。