CSS與HTML是網頁設計中不可缺少的兩種語言，它們可以讓網頁擁有漂亮的外觀和優秀的功能。CSS可以控制網頁中的樣式和布局，而HTML則是網頁的結構基礎。在CSS中，我們可以使用豎線來設置樣式。

.box{
border-left: 2px solid #000000; 
/* 通過border-left來畫一個2像素寬度、黑色、實線樣式的豎線 */
}

以上代碼演示了如何使用border-left屬性來畫一個2像素寬度、黑色、實線樣式的豎線。通過設置其寬度、顏色以及線條樣式，我們可以隨意定制自己想要的豎線樣式。

除了使用border-left，我們還可以使用偽元素：before和:after來實現豎線效果。以下是示例代碼：

.box{
position: relative;
}
.box:before{
content: "";
border-left: 2px dashed #000000;
height: 100%;
position: absolute;
left: 100%;
top: 0;
bottom: 0;
}

以上代碼使用了偽元素:before來實現豎線效果。通過設置其content為空、寬度、顏色以及線條樣式，我們可以隨意定制自己想要的豎線樣式。并且通過position屬性的設置，可以使豎線與自己設置的元素相互作用，從而實現更靈活的布局。

CSS與HTML配合使用，可以為我們帶來更加豐富的網頁設計效果。比如使用豎線來優化網頁的視覺效果，達到更好的用戶體驗。