CSS是一種用于網頁樣式設計的語言，其中有一種元素可以讓我們在頁面中添加豎直線，非常實用！這個元素就是邊框（border）。

border-left: 1px solid black;

通過給元素添加邊框，我們可以讓這個元素的左邊框線顯示出來，從而模擬出一條豎直線。例如，如果我們想要在網頁左側創(chuàng)建一個豎直的導航欄，我們可以給導航欄添加以下樣式：

.nav {
border-left: 1px solid black;
height: 100%;
position: fixed;
top: 0;
left: 0;
}

在這個例子中，我們給導航欄的左側添加了一條1像素寬的黑色邊框，使之成為一條豎直線。同時，我們通過將導航欄的position屬性設置為fixed和top和left設置為0來確保導航欄固定在網頁左上角，并占據(jù)整個屏幕的高度。

除了通過邊框來實現(xiàn)豎直線外，我們還可以使用偽元素（pseudo-element）::before或::after來創(chuàng)建豎直線。下面是代碼示例：

.line {
position: relative;
width: 100%;
height: 50px;
}
.line::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 100%;
background-color: #000;
}

在這個示例中，我們創(chuàng)建了一個高為50像素的元素，并使用偽元素::before在元素中間創(chuàng)建了一條黑色的1像素寬豎直線。我們使用了position: relative將元素的定位方式設置為相對定位，這樣才能讓偽元素以元素為基準進行定位。同時，我們將偽元素的寬度設置為1像素、高度設置為元素的高度，并將左側定位在元素中間，通過使用transform: translateX(-50%)來將偽元素的左側移動到元素中間。最后，我們設置了背景顏色為黑色，讓它成為一條黑色豎直線。

通過使用邊框或偽元素，我們可以在網頁中輕松地創(chuàng)建豎直線，并讓網頁Look更棒！