CSS中的分割線是網頁設計中常用的一種元素，它可以將頁面的內容進行分隔，讓網站的內容更加清晰明了。常見的分割線有水平和垂直的兩種，下面我們就來具體講解一下如何使用CSS來實現這些分割線。

首先，我們先來看一下如何創建水平分割線。在CSS中，我們可以通過設置border屬性來實現這個效果。具體來說，我們可以設置border-bottom的值來給網頁添加一個底部邊框，從而實現水平分割線的效果。代碼如下：

.line {
border-bottom: 2px solid #ccc;
}

上面這段代碼中，我們為line類添加了一個底部邊框，邊框的寬度為2px，顏色為#ccc。這里我們使用的是solid樣式，表示邊框是實線，還可以使用dotted、dashed等樣式來實現不同的效果。

除了設置border-bottom屬性，我們還可以通過設置偽元素:before或:after來實現水平分割線的效果。具體代碼如下：

.line::after {
content: "";
display: block;
height: 1px;
width: 100%;
background-color: #ccc;
}

上面這段代碼中，我們使用偽元素::after來創建一個內容為空的塊元素，并將其設置為塊級元素，高度為1px，寬度為100%，背景顏色為#ccc。這樣就可以實現一個水平分割線的效果了。

接下來，我們來看一下如何創建垂直分割線。在CSS中，我們可以使用height屬性來控制元素的高度，從而實現垂直分割線的效果。代碼如下：

.line {
height: 100%;
border-left: 2px solid #ccc;
}

上面這段代碼中，我們為line類添加了一個左邊邊框，邊框的寬度為2px，顏色為#ccc。同時，我們還將line類的高度設置為100%，這樣就可以實現一個垂直分割線的效果了。

除了設置border-left屬性，我們還可以通過設置偽元素:before或:after來實現垂直分割線的效果。具體代碼如下：

.line::after {
content: "";
display: block;
height: 100%;
width: 1px;
background-color: #ccc;
}

上面這段代碼中，我們使用偽元素::after來創建一個內容為空的塊元素，并將其設置為塊級元素，高度為100%，寬度為1px，背景顏色為#ccc。這樣就可以實現一個垂直分割線的效果了。