在網頁設計中，常常需要使用滾動條來滾動網頁中的長內容，而CSS編寫垂直滾動條也是一個非常實用的技巧。

/*CSS代碼*/
.scrollbar {
height: 300px;
overflow-y: scroll;
}
.scrollbar::-webkit-scrollbar {
width: 5px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
.scrollbar::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 2px;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background-color: #555;
}

首先，我們需要創建一個容器，可以使用`div`標簽，也可以使用其他標簽，然后為該容器添加一個指定高度的`height`屬性和`overflow-y: scroll`屬性，這樣內容超出容器高度時就會出現滾動條。

接下來，我們需要使用偽元素`::-webkit-scrollbar`來對滾動條的樣式進行設置。`::-webkit-scrollbar`只能在WebKit內核的瀏覽器中使用，但是目前所有主流瀏覽器都已經支持，因此不必擔心兼容性問題。

在`::-webkit-scrollbar`中可以設置滾動條的寬度、背景色、滑塊樣式等屬性。`::-webkit-scrollbar-thumb`用來設置滑塊的樣式，`::-webkit-scrollbar-thumb:hover`用來設置鼠標滑過時滑塊的樣式。

通過以上幾個步驟，我們就可以成功地使用CSS編寫垂直滾動條。當然，如果需要水平滾動條，只需要將`overflow-y`屬性改為`overflow-x`即可。