CSS3提供了制定瀏覽器滾動條樣式的方法,通過對滾動條的樣式進行修改,可以為網頁添加更具個性化的效果。
/*webkit瀏覽器*/ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background-color: #f5f5f5; } ::-webkit-scrollbar-thumb { background-color: #000; } /*firefox*/ scrollbar-color: #000 #f5f5f5; scrollbar-width: thin; /*IE*/ scrollbar-face-color: #f5f5f5; scrollbar-shadow-color: #000; scrollbar-highlight-color: #000; scrollbar-3dlight-color: #f5f5f5; scrollbar-darkshadow-color: #f5f5f5; scrollbar-track-color: #f5f5f5; scrollbar-arrow-color: #000;
上面的代碼是幾種不同瀏覽器的滾動條樣式修改方法,可以根據需要選擇相應的代碼進行設置。如上代碼中,可以通過修改width的值來調整滾動條寬度;修改background-color的值來修改滾動條背景色;修改scrollbar-color的值來設置兩個滾動條之間的填充顏色等。
需要注意的是,滾動條樣式的設置存在瀏覽器兼容性問題,部分瀏覽器可能不支持某些樣式的修改,此時應該及時調整代碼以保證網頁的顯示效果。
上一篇瀏覽器解析前對css編碼
下一篇浮動元素垂直居中 css