在CSS中，

<hr>

元素通常用于創建一個分割線，用于分隔文本或其他內容。

隨著CSS的發展，hr元素的樣式也越來越豐富。在CSS中，我們可以使用樣式層疊的原理來改變hr元素的樣式。

通過CSS樣式，我們可以改變hr元素的寬度、高度、顏色、邊框樣式、邊框寬度等屬性。下面是一些示例代碼：

hr{
width: 80%; /* 設置水平線寬度為80% */
height: 1px; /* 設置水平線高度為1像素 */
background-color: #ccc; /* 設置水平線顏色為灰色 */
border: none; /* 去除水平線邊框 */
margin: 20px auto; /* 設置水平線上下邊距為20像素，左右自動居中 */
}
hr.vertical{
height: 80%; /* 設置豎直線高度為80% */
width: 1px; /* 設置豎直線寬度為1像素 */
background-color: #ccc; /* 設置豎直線顏色為灰色 */
border: none; /* 去除豎直線邊框 */
margin: auto 20px; /* 設置豎直線左右邊距為20像素，上下自動居中 */
}

這些CSS樣式代碼可用于自定義hr元素的樣式。

在實際開發過程中，我們可以在HTML中使用預定義好的class名稱，如：

<hr class="vertical">

，來應用預定義的CSS樣式。