在網頁設計中，使用水平線可以增加頁面的美觀和結構感。下面介紹一些常見的水平線CSS樣式設置方法。

/*基礎設置*/
hr{
border:none; /*去除默認邊框*/
height:1px; /*設置高度*/
background-color:#ddd; /*設置背景色*/
}
/*居中顯示*/
hr.center{
display:block;
margin: 0 auto;
}
/*虛線樣式*/
hr.dashed{
border-style:dashed;
border-color:#ddd;
border-width:1px;
}
/*點狀樣式*/
hr.dotted{
border-style:dotted;
border-color:#ddd;
border-width:1px;
}
/*漸變顏色*/
hr.gradient{
background-image:linear-gradient(to right, #ddd, #000);
height:2px; /*設置高度*/
border:none; /*去除默認邊框*/
}
/*圖片樣式*/
hr.img{
background-image:url('line.png'); /*設置圖片路徑*/
background-repeat:no-repeat;
height:10px; /*設置高度*/
border:none; /*去除默認邊框*/
}

通過以上設置，可以靈活地使用水平線樣式來裝飾網頁，美化頁面效果。