今天在使用CSS樣式美化頁面的時候，遇到了一個比較棘手的問題。我想將瀏覽器滾動條進行美化，但是奇怪的是，我的CSS樣式無效了。下面是代碼：

::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.6); 
}
::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.1); 
}

我用了webkit前綴，但是效果還是不對。我找到了網上一些資料，發現與瀏覽器兼容有關。如果瀏覽器廠商不支持自定義滾動條，那么樣式就不會生效。 這是因為不同的瀏覽器內核實現了不同的滾動條樣式。比如著名的WebKit內核就可以通過CSS樣式來控制滾動條，而Gecko內核則無法實現。而我的測試瀏覽器默認就是Gecko內核，所以才會無效。 解決辦法有兩個。一是使用第三方插件，比如NiceScroll或者iScroll等。這些插件可以讓你自定義滾動條的各種樣式，比如大小、顏色、形狀等等。二是使用強制渲染，如果只是想要簡單的美化滾動條，可以使用以下代碼：

body{
scrollbar-face-color:#666;
scrollbar-shadow-color:#eee;
scrollbar-highlight-color:#eee;
scrollbar-3dlight-color:#ccc;
scrollbar-arrow-color:#000;
scrollbar-track-color:#eee;
scrollbar-darkshadow-color:#ccc;
}

這段代碼可以讓滾動條有一個簡單的美化效果，但是可能并不是我們想要的效果。總之，想要自定義滾動條還是需要了解瀏覽器內核的實現方式，然后再確定是否采用自定義樣式。