滚动条美化

美化你的滚动条

将下列代码添加到主题的style.css 的最下面即可:

/*—滚动条默认显示样式–*/  
::-webkit-scrollbar-thumb{   
    background-color:#292929;   
    height:50px;   
    outline-offset:-2px;   
    outline:2px solid #fff;   
    -webkit-border-radius:4px;   
    border: 2px solid #fff;   
}   
  
/*—鼠标点击滚动条显示样式–*/  
::-webkit-scrollbar-thumb:hover{   
    background-color:#292929;   
    height:50px;   
    -webkit-border-radius:4px;   
}   
  
/*—滚动条大小–*/  
::-webkit-scrollbar{   
    width:10px;   
    height:10px;   
}   
  
/*—滚动框背景样式–*/  
::-webkit-scrollbar-track-piece{   
    background-color:#fff;   
    -webkit-border-radius:0;   
} 

网站滚动条美化

提取码:无,解压码:

下载

效果如图:

滚动条美化

部分浏览器不支持此样式显示

因主题原因,在示例代码中,有部分
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论