css实战:网页滚动条美化代码

欧阳锋

css中可以做到页面滚动条美化的代码很多，但是我个人比较喜欢这一款简单的界面，喜欢的直接放在你网站页面的公共css样式中即可，方便！

1. /*---滚动条默认显示样式--*/
   
2. ::-webkit-scrollbar-thumb {
   
3.   background-color: #999999;
   
4.   height: 50px;
   
5.   outline-offset: -2px;
   
6.   outline: 2px solid #fff;
   
7.   -webkit-border-radius: 4px;
   
8.   border: 2px solid #fff;
   
9. }
   
10. /*---鼠标点击滚动条显示样式--*/
    
11. ::-webkit-scrollbar-thumb:hover {
    
12.   background-color: #fb4446;
    
13.   height: 50px;
    
14.   -webkit-border-radius: 4px;
    
15. }
    
16. /*---滚动条大小--*/
    
17. ::-webkit-scrollbar {
    
18.   width: 8px;
    
19.   height: 8px;
    
20. }

复制代码