美文网首页
chrome浏览器滚动条样式修改

chrome浏览器滚动条样式修改

作者: 辣子_ | 来源:发表于2020-08-07 12:50 被阅读0次
    /*---滚动条默认显示样式--*/
    ::-webkit-scrollbar-thumb{
       
       height:50px;
       outline-offset:-2px;
       outline:2px solid #fff;
       -webkit-border-radius:4px;
       border: 2px solid #fff;
    }
     
    /*---鼠标点击滚动条显示样式--*/
    ::-webkit-scrollbar-thumb:hover{
       
       height:50px;
       -webkit-border-radius:4px;
    }
     
     
    /*---滚动条大小--*/
    ::-webkit-scrollbar{
       width:10px;
       height:8px;
    }
     
    /*---滚动框背景样式--*/
    ::-webkit-scrollbar-track-piece{
       
       -webkit-border-radius:0;
    }
     
    ::-webkit-scrollbar-track { background-color: #eee; } /* 滚动条的滑轨背景颜色 */ 
    ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); } /* 滑块颜色 */ 
    ::-webkit-scrollbar-button { background-color: #eee; } /* 滑轨两头的监听按钮颜色 */
    ::-webkit-scrollbar-corner { background-color: black; } /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
    

    相关文章

      网友评论

          本文标题:chrome浏览器滚动条样式修改

          本文链接:https://www.haomeiwen.com/subject/uqjfdktx.html