美化滾動條CSS

::-webkit-scrollbar {

? ? width: 8px;

? ? padding-right: 4px;

? ? background-color:#f8f8f8 ;

? ? /*其他樣式，比如圓角等*/

}

/*滑塊樣式*/

::-webkit-scrollbar-thumb {

? ? -webkit-border-radius: 4px;

? ? border-radius: 4px;

? ? background-color: #c6c6c6;

}

/*當前窗口失去焦點時的滑塊樣式*/

::-webkit-scrollbar-thumb:window-inactive {

? ? background-color: #f8f8f8;

}

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、垂直對齊 如果你用CSS，則你會有困惑：我該怎么垂直對齊容器中的元素？現在，利用CSS3的Transform，...
    kiddings閱讀 3,195評論 0贊 11
  • 1. 黑白圖像 這段代碼會讓你的彩色照片顯示為黑白照片，是不是很酷？ img.desaturate { fil...
    我家老公萌萌噠閱讀 307評論 0贊 0
  • 各種純css圖標 CSS3可以實現很多漂亮的圖形，我收集了32種圖形，在下面列出。直接用CSS3畫出這些圖形，要比...
    劍殘閱讀 9,634評論 0贊 8
  • 滾動條組成： ::-webkit-scrollbar 滾動條整體部分 ::-webkit-scrollbar-th...
    mindy1031閱讀 2,233評論 0贊 1
  • 說起報恩，都知道白蛇傳，那個報恩來的白娘子，美麗大方，關鍵法術了得！ 還有白狐，各種報恩呀，都是漂亮可人的美人兒，...
    問心淺笑閱讀 924評論 13贊 24