CSS是網頁設計中不可或缺的一部分，它可以讓我們輕松地美化網頁。其中，滾動條的美化也是很重要的一部分。有時候我們需要將滾動條變細，以適應網頁的美觀需求。這時候我們可以使用CSS來實現。

具體的CSS樣式可以使用以下代碼：

::-webkit-scrollbar {
width: 5px; /*設置滾動條寬度*/
height: 5px; /*設置滾動條高度*/
}
::-webkit-scrollbar-thumb {
background-color: #c1c1c1; /*設置滾動條顏色*/
}
::-webkit-scrollbar-track {
background-color: #f5f5f5; /*設置滾動條背景色*/
}

上面的代碼使用了Webkit瀏覽器的偽元素，來實現滾動條的美化。可以根據需求，自行調整滾動條的寬度、高度和顏色。另外，還可以設置滾動條的背景色。

缺點是，這種方法只支持Webkit瀏覽器，因此如果需要考慮兼容性，可以使用以下代碼來實現：

::-webkit-scrollbar {
width: 5px; /*設置滾動條寬度*/
height: 5px; /*設置滾動條高度*/
}
::-webkit-scrollbar-thumb {
background-color: #c1c1c1; /*設置滾動條顏色*/
}
::-webkit-scrollbar-track {
background-color: #f5f5f5; /*設置滾動條背景色*/
}
/*針對Firefox的樣式*/
* {
scrollbar-width: thin; /*設置滾動條寬度*/
scrollbar-color: #c1c1c1 #f5f5f5; /*設置滾動條顏色和背景色*/
}

上面的代碼可以兼容Webkit瀏覽器和Firefox瀏覽器。其中，針對Firefox瀏覽器的樣式，使用了scrollbar-width和scrollbar-color屬性來實現滾動條的美化。

通過以上的代碼，我們可以輕松地將滾動條變細，適應網頁的美觀需求。