滾動條是許多網頁設計中常用的一個功能，可以幫助用戶在頁面中滾動，以查看超出頁面顯示范圍的內容。而在 CSS 中，我們可以通過一些屬性進行滾動條樣式的自定義，使得滾動條不再是單調的樣式。

/* 兼容性寫法 */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #c1c1c1;
}
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #f1f1f1;
}
::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active {
background-color: #ddd;
}

在實現自定義滾動條樣式時，我們需要用到多個偽類選擇器。其中，::-webkit-scrollbar選擇器用于設置滾動條的整體樣式，包括寬度和高度等。而::-webkit-scrollbar-thumb則用于設置滾動條的拖拽柄樣式，可以調整其背景顏色、圓角等屬性。::-webkit-scrollbar-track設置滾動條背景的樣式，包括顏色和圓角的設置等。

上述代碼雖然使用了前綴-webkit-，但這里說的“兼容 CSS”并不僅限于適配 WebKit 內核的瀏覽器。在實際開發中，我們需要在這些樣式后添加不同瀏覽器的前綴，比如-moz-（Firefox）、-ms-（IE）和-o-（Opera）等，以兼容各種瀏覽器之間的差異。

總而言之，滾動條的樣式自定義可以通過 CSS 實現，而為了保證兼容性，我們需要在 CSS 代碼中加入適當的前綴。