瀏覽器滾動(dòng)條樣式怎么修改

這篇文章主要介紹“瀏覽器滾動(dòng)條樣式怎么修改”，在日常操作中，相信很多人在瀏覽器滾動(dòng)條樣式怎么修改問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”瀏覽器滾動(dòng)條樣式怎么修改”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

{

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

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

      scrollbar-3dlight-color: blue; /*滾動(dòng)條亮邊的顏色*/

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

      scrollbar-shadow-color: yellow; /*滾動(dòng)條陰影的顏色*/

      scrollbar-darkshadow-color: green; /*滾動(dòng)條強(qiáng)陰影的顏色*/

      scrollbar-track-color: #eee; /*滾動(dòng)條背景顏色*/

      scrollbar-base-color: black; /*滾動(dòng)條的基本顏色*/

      Cursor:url(mouse.cur); /*自定義個(gè)性鼠標(biāo)*/

      /*以上2項(xiàng)適用與：body、div、textarea、iframe*/

  }

  ::-webkit-scrollbar {  /* 滾動(dòng)條整體部分 */

      width:10px;

      margin-right:2px

  }

  ::-webkit-scrollbar-button { /* 滾動(dòng)條兩端的按鈕 */

      width:10px;

      background-color: yellow;

  }

  ::-webkit-scrollbar:horizontal {

      height:10px;

      margin-bottom:2px

  }

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

      border-radius: 10px;

  }

  ::-webkit-scrollbar-track-piece {  /*內(nèi)層軌道，滾動(dòng)條中間部分 */

      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 { /* 鼠標(biāo)移入滑塊 */

      background: #909090;

  }

  .demo {

      width: 400px;

      height: 200px;

      overflow: auto;

  }

到此，關(guān)于“瀏覽器滾動(dòng)條樣式怎么修改”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！