在網頁制作中,滾動條是一個非常常用的元素,對于大多數網頁開發者來說,怎樣改變滾動條的樣式常常是一個需要解決的問題。
CSS中,改變滾動條樣式主要通過對滾動條各部分的偽元素進行樣式設置來實現,其中包括滾動條軌道(即滾動條滑塊運動的軌跡)、滾動條滑塊、滾動條按鈕等。
下面以改變滾動條滑塊樣式為例:
/* 非webkit內核 */ ::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 5px; } /* IE滾動條 */ ::-ms-thumb { background-color: #ccc; border-radius: 5px; } /* 其他瀏覽器滾動條 */ ::-moz-range-thumb { background-color: #ccc; border-radius: 5px; }
如上面的代碼所示,用 CSS 設置樣式分別對不同瀏覽器內核的滾動條進行了不同的設置。其中,::-webkit-scrollbar-thumb
屬性表示對webkit內核的滾動條進行樣式設置,::-ms-thumb
是表示對IE瀏覽器的滾動條進行設置,::-moz-range-thumb
則是針對火狐瀏覽器的。
我們可以在這些偽元素中,通過background-color或者background-image設置滾動條滑塊的背景色或背景圖,通過border-radius設置滑塊的圓角等:
::-webkit-scrollbar-thumb { background-color: #ccc; background-image: url('sliderbg.png'); border-radius: 5px; }
上述代碼中的background-color指定了滑塊的背景色為#ccc,而background-image則指定了滑塊的背景圖像為sliderbg.png。
通過這樣的方式,我們就可以使用 CSS 改變滾動條滑塊的樣式了,對于其他滾動條的偽元素,設置方式類似。
上一篇mysql批量設置隨機數
下一篇css改變文字描邊顏色