瀏覽器滾動條樣式怎么修改

這篇文章主要介紹“瀏覽器滾動條樣式怎么修改”，在日常操作中，相信很多人在瀏覽器滾動條樣式怎么修改問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”瀏覽器滾動條樣式怎么修改”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

{

      scrollbar-arrow-color: red; /*上下按鈕上三角箭頭的顏色*/

      scrollbar-face-color: #CBCBCB; /*滾動條凸出部分的顏色*/

      scrollbar-3dlight-color: blue; /*滾動條亮邊的顏色*/

      scrollbar-highlight-color: #333; /*滾動條空白部分的顏色*/

      scrollbar-shadow-color: yellow; /*滾動條陰影的顏色*/

      scrollbar-darkshadow-color: green; /*滾動條強陰影的顏色*/

      scrollbar-track-color: #eee; /*滾動條背景顏色*/

      scrollbar-base-color: black; /*滾動條的基本顏色*/

      Cursor:url(mouse.cur); /*自定義個性鼠標*/

      /*以上2項適用與：body、div、textarea、iframe*/

  }

  ::-webkit-scrollbar {  /* 滾動條整體部分 */

      width:10px;

      margin-right:2px

  }

  ::-webkit-scrollbar-button { /* 滾動條兩端的按鈕 */

      width:10px;

      background-color: yellow;

  }

  ::-webkit-scrollbar:horizontal {

      height:10px;

      margin-bottom:2px

  }

  ::-webkit-scrollbar-track {  /* 外層軌道 */

      border-radius: 10px;

  }

  ::-webkit-scrollbar-track-piece {  /*內層軌道，滾動條中間部分 */

      background-color: #333333;

      border-radius: 10px;

  }

  ::-webkit-scrollbar-thumb {  /* 滑塊 */

      width:10px;

      border-radius: 5px;

      background: #CBCBCB;

  }

  ::-webkit-scrollbar-corner { /* 邊角 */

      width: 10px;

      background-color: red;

  }

  ::-webkit-scrollbar-thumb:hover { /* 鼠標移入滑塊 */

      background: #909090;

  }

  .demo {

      width: 400px;

      height: 200px;

      overflow: auto;

  }

到此，關于“瀏覽器滾動條樣式怎么修改”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！