在網頁設計中，滾動條是經常出現的設計元素，它能夠很好地幫助用戶瀏覽長篇內容，同時也有一定的美化作用。那么如何使用CSS來設置漂亮的滾動條呢？

/* 去除默認樣式 */
::-webkit-scrollbar {
width: 8px;
height: 6px;
background-color: #fff;
}
/* 滾動條軌道 */
::-webkit-scrollbar-track {
border-radius: 6px;
background-color: #f4f4f4;
}
/* 滑塊 */
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: #cfcfcf;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.2);
}
/* 鼠標懸浮在滑塊上的樣式 */
::-webkit-scrollbar-thumb:hover {
background-color: #ddd;
}
/* 滾動條按鈕 */
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}

以上代碼使用的是Webkit瀏覽器的CSS樣式，它們將會影響Chrome、Safari、Edge等現代瀏覽器。

在以上樣式中，我們去除了默認的滾動條樣式，并設置了滾動條的寬度、高度和背景色。接下來，我們設置了滾動條的軌道樣式和滑塊樣式，并在滑塊樣式中加入了陰影效果。最后，我們還設置了鼠標懸浮在滑塊上的樣式和滾動條按鈕的樣式。

通過以上CSS樣式的設置，我們可以輕松地實現一個美觀、實用的滾動條，讓用戶在長篇內容中更方便地瀏覽。