CSS滾動條設計是網頁設計中非常重要的一部分，一些好看的滾動條能夠提升網站的美觀度和用戶體驗。本文將為大家介紹一個設計CSS滾動條兩端的方法。

::-webkit-scrollbar{
width:10px;
height:10px;
}
::-webkit-scrollbar-track{
background-color:#ffffff;
}
::-webkit-scrollbar-thumb{
border-radius:5px;
background-color:#cccccc;
background-clip:padding-box;
border:2px solid #ffffff;
}
::-webkit-scrollbar-thumb:hover{
background-color:#999999;
}

首先，我們需要用::webkit-scrollbar偽元素來選擇要設置的滾動條。我們在其中設置了滾動條的寬度和高度。

接著，我們選擇::-webkit-scrollbar-track來設置滾動條的軌道（track）的背景顏色為白色。

下來我們來到了滾動條上最常用的VisualStyle,::-webkit-scrollbar-thumb樣式。在這里，我們設置了滾動條的邊框和背景顏色等。注意要把background-clip設為padding-box，這樣才不會把滾動條的背景顏色滲到邊框里面。

最后，在:hover偽類下，我們為滾動條設置了一個hover樣式，當滑鼠在滾動條上停留時，滾動條的背景顏色會變為灰色，使滾動條更清晰、可被選中。

通過上述的CSS代碼，我們可以設計出一個非常漂亮并實用的滾動條。在滾動條的兩端，我們使用了兩個圓形的邊角來提高滾動條的美觀度和質感。希望大家能夠嘗試這種設計方法，提升自己的網頁設計水平。