CSS中的hr標(biāo)簽主要用于分割線的展示，在一些地方，如網(wǎng)頁(yè)的頁(yè)腳或新聞頁(yè)中，會(huì)使用分割線來(lái)分割不同的內(nèi)容，讓頁(yè)面更加美觀。但是默認(rèn)的hr樣式可能并不美觀，接下來(lái)我們來(lái)學(xué)習(xí)一下如何設(shè)置hr的樣式。

首先，我們需要使用CSS的樣式來(lái)定義hr的樣式。可以使用border、background、height、width等屬性達(dá)到需要的視覺(jué)效果。

hr {
/*通過(guò)設(shè)置border屬性來(lái)調(diào)整hr上下邊框的寬度和高度*/
border-top: 1px solid black;
border-bottom: 1px solid black;
/*通過(guò)設(shè)置background-color屬性來(lái)設(shè)置hr的顏色*/
background-color: gray;
/*通過(guò)設(shè)置height屬性來(lái)設(shè)置hr的高度*/
height: 1px;
/*通過(guò)設(shè)置width屬性來(lái)設(shè)置hr的寬度*/
width: 50%;
}

以上代碼中，我們?cè)O(shè)置了hr的上下邊框?yàn)?像素寬的黑色實(shí)線，背景顏色為灰色，高度為1像素，寬度為頁(yè)面寬度的一半。此外，在這里提供一些常見(jiàn)的樣式設(shè)置：

/*設(shè)置hr的樣式為虛線，顏色為#ccc，寬度為70%*/
hr {
border-top: 1px dashed #ccc;
width: 70%;
}
/*設(shè)置hr的樣式為實(shí)線，顏色為#000，寬度為100%*/
hr {
border-top: 1px solid #000;
border-bottom: none;
width: 100%;
}
/*設(shè)置hr的樣式為點(diǎn)線，顏色為#000，寬度為60%*/
hr {
border: none;
border-top: 1px dotted #000;
color: #000;
text-align: center;
height: 1px;
width: 60%;
}

總結(jié)來(lái)說(shuō)，通過(guò)使用CSS的樣式，我們可以輕松地達(dá)到需要的分割線效果。