在CSS中，方框是我們經常會用到的樣式，用來包含和布局元素。但是有時候，我們需要讓這些方框變成豎線，以達到不同的設計效果。那么實現這樣的效果需要怎么做呢？

首先，我們來看一下最基本的方框樣式：

.box {
width: 100px;
height: 100px;
border: 1px solid black;
}

這個樣式會生成一個寬100px、高100px，邊框為1像素黑色實線的方框。現在我們要將它變成豎線，我們可以使用border-right屬性：

.box {
width: 100px;
height: 100px;
border-right: 1px solid black;
}

這個樣式只給方框的右邊添加了一個1像素的黑色實線邊框，其他三個方向沒有邊框。這樣，我們就成功地將方框變成了豎線。

如果想讓這個豎線能夠占據整個空間的高度，可以使用height: 100%：

.box {
width: 100px;
height: 100px;
border-right: 1px solid black;
height: 100%;
}

這個樣式表示，豎線的高度是100%，也就是等于方框的高度。這樣，我們就能夠在整個方框中顯示一個豎線了。

除了使用border-right屬性，還可以使用其他邊框屬性來實現不同的效果。比如，我們可以同時設置border-left和border-right屬性，來讓方框變成兩條豎線：

.box {
width: 100px;
height: 100px;
border-left: 1px solid black;
border-right: 1px solid black;
}

除了使用實線邊框，還可以使用虛線邊框來實現這個效果。虛線邊框的樣式是通過border-style屬性來設置的：

.box {
width: 100px;
height: 100px;
border-right: 1px dashed black;
}

這個樣式表示，我們將豎線的邊框樣式設置為了黑色的虛線。通過設置不同的border-style屬性，我們可以得到不同的虛線樣式。

總之，將方框變成豎線并不是一件困難的事情。只需要使用對應的邊框屬性，就能夠實現不同的效果。通過這些技巧，我們可以更加靈活地控制頁面的樣式，實現更加獨特的設計效果。