CSS怎么修改滚动条样式

电脑:win7,64位

开辟东西:HBuilder X

方式/步调

  1. 1

    打开网页开辟东西,新建一个HTML文件

    43a7d933c895d143c1fca14f7cf082025baf07d7.jpg
  2. 2

    添加填充内容让页面呈现滚动条(这一步是为了便利给大师演示!)

    d0c8a786c9177f3e5b39b8617fcf3bc79f3d5648.jpg
  3. 3

    编写滚动条样式:

    body::-webkit-scrollbar{ 

    width:10px;

    }

    body::-webkit-scrollbar-track{

    background: #999;

      border-radius:2px;

    }

    body::-webkit-scrollbar-thumb{

      background: red;

      border-radius:10px;

    }

    body::-webkit-scrollbar-thumb:hover{

      background: #333;

    }

    body::-webkit-scrollbar-corner{

      background: #179a16;

    }

    4610b912c8fcc3ce8a478e5f9d45d688d53f20d2.jpg
  4. 4

    打开浏览器预览结果:

    4a36acaf2edda3cc8b3bff4c0ee93901203f92fb.jpg
  5. 5

    滚动条参数申明:

    ::-webkit-scrollbar 

    ::-webkit-scrollbar-thumb

    ::-webkit-scrollbar-track 

    ::-webkit-scrollbar-button

    ::-webkit-scrollbar-track-piece

    ::-webkit-scrollbar-corner

    ::-webkit-resizer 

    6a63f6246b600c33402e98a4154c510fd9f9a103.jpg
  • 发表于 2019-12-20 17:00
  • 阅读 ( 962 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
联系我们:uytrv@hotmail.com 问答工具