在CSS中畫豎線可以應(yīng)用于許多場合，比如分隔頁面的兩個(gè)模塊。本文將會(huì)介紹兩種CSS繪制豎線的方法。 第一種方法是使用border屬性來繪制豎線。我們可以通過選擇要分隔的元素，在其左側(cè)或右側(cè)繪制出一個(gè)豎線。下面是一個(gè)例子：

p {
border-left: 1px solid black;
padding-left: 10px;
}

上述代碼將在每個(gè)p標(biāo)簽的左側(cè)插入一條1像素寬的黑色邊框，padding-left屬性用于使文本與邊框之間有一定距離。如果要在右側(cè)繪制豎線，可以改為使用border-right屬性。 第二種方法則更加靈活，需要使用偽元素(:before或:after)來繪制豎線。首先，我們需要設(shè)置好豎線的樣式，比如顏色、高度、寬度等。隨后，在需要繪制豎線的元素上使用:before或:after偽元素，在其內(nèi)部插入一個(gè)空的content屬性，然后通過設(shè)置position和寬高使其定位到任意位置。 下面是一段代碼：

p::before {
content: "";
height: 100%;
width: 1px;
background-color: black;
position: absolute;
left: -10px;
}

上述代碼將繪制一條黑色豎線，寬度為1像素，高度為其父元素的高度100%，處于絕對定位，左側(cè)有10像素的空隙。通過設(shè)置left（或right）和top（或bottom）屬性，可以將豎線定位到任意位置。 總之，學(xué)會(huì)使用CSS繪制豎線可以為網(wǎng)頁布局提供更多的選擇，讓網(wǎng)頁看起來更加美觀、實(shí)用。