CSS是一種用于網頁設計的語言，它可以讓我們實現各種各樣的效果。其中一種常見的效果是豎線，它常常被用于分隔不同的內容塊，使得網頁的結構更加清晰。在本文中，我們將介紹如何用CSS制作豎線效果。 首先，我們可以使用CSS的border屬性來制作豎線。border是CSS的邊框屬性，它可以設置元素的邊框樣式、寬度和顏色。對于豎線效果，我們可以將元素的左側邊框設置為1個像素的實線，并且將右側和上下邊框設置為0，代碼如下：

/* 在此處放置CSS代碼 */
.vertical-line {
border-left: 1px solid #000000;
border-right: 0;
border-top: 0;
border-bottom: 0;
}

然后，我們可以將豎線的寬度和顏色進行自定義。例如，我們可以將豎線的顏色設置為淡灰色，并且將寬度設置為2個像素，代碼如下：

/* 在此處放置CSS代碼 */
.vertical-line {
border-left: 2px solid #CCCCCC;
border-right: 0;
border-top: 0;
border-bottom: 0;
}

最后，我們可以使用CSS的偽類選擇器:before來在元素的左側添加一個自定義的內容，例如豎杠（|），代碼如下：

/* 在此處放置CSS代碼 */
.vertical-line {
border-left: 2px solid #CCCCCC;
border-right: 0;
border-top: 0;
border-bottom: 0;
position: relative;
}
.vertical-line:before {
content: "|";
position: absolute;
top: 0;
left: -5px;
}

這樣就可以在豎線的左側添加一個豎杠，讓豎線更加真實。 總的來說，制作豎線效果并不難，只需要使用CSS的border屬性、偽類選擇器和一些自定義樣式就可以輕松實現。如果想要在網頁設計中添加豎線，可以自行嘗試上面的代碼，或者根據個人需要進行自定義。