在開發網頁時，我們通常會使用各種 CSS 樣式來美化頁面。而 HR 分割線作為一種常見的網頁元素，也需要進行樣式設置。

下面介紹一些 HR 分割線 CSS 樣式。

/* 1.基礎樣式 */
hr {
border: none; /*去掉默認邊框*/
height: 2px; /*設置高度*/
background-color: #ccc; /*設置背景顏色*/
margin: 20px 0; /*設置上下外邊距*/
}
/* 2.虛線樣式 */
hr.dashed {
border-style: dashed; /*設置邊框樣式*/
}
/* 3.實線樣式 */
hr.solid {
border-style: solid; /*設置邊框樣式*/
}
/* 4.雙線樣式 */
hr.double {
border-style: double; /*設置邊框樣式*/
}
/* 5.漸變樣式 */
hr.gradient {
background: linear-gradient(to right, #ccc, #333); /*設置漸變背景色*/
}
/* 6.圓角樣式 */
hr.rounded {
border-radius: 5px; /*設置圓角*/
}
/* 7.動畫樣式 */
hr.animated {
width: 50%; /*設置寬度*/
height: 2px; /*設置高度*/
background-color: #333; /*設置背景顏色*/
position: relative; /*設置相對定位*/
animation: stretch 2s ease-in-out alternate infinite; /*設置動畫*/
}
@keyframes stretch {
0% {
left: 0; /*初始位置*/
width: 0; /*初始寬度*/
}
100% {
left: 0; /*結束位置*/
width: 100%; /*結束寬度*/
}
}

注意，以上樣式都應該放在樣式表內，并設置合適的類名以便調用。

HR 分割線樣式可以根據實際需求進行調整，如寬度、高度、邊框樣式等，從而使 HR 分割線在網頁中更美觀、美觀。