[CSS3]CSS3自定义滚动条样式 -webkit-scrollbar

[CSS3]CSS3自定义滚动条样式 -webkit-scrollbar

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/   
::-webkit-scrollbar{   
    width: 16px;   
    height: 16px;   
    background-color: #F5F5F5;   
}   
   
/*定义滚动条轨道 内阴影+圆角*/   
::-webkit-scrollbar-track{   
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);   
    border-radius: 10px;   
    background-color: #F5F5F5;   
}   
   
/*定义滑块 内阴影+圆角*/   
::-webkit-scrollbar-thumb{   
    border-radius: 10px;   
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);   
    background-color: #555;   
}   

::-webkit-scrollbar              { /* 1 */ }   
 
::-webkit-scrollbar-button       { /* 2 */ }   
 
::-webkit-scrollbar-track        { /* 3 */ }   
 
::-webkit-scrollbar-track-piece  { /* 4 */ }   
 
::-webkit-scrollbar-thumb        { /* 5 */ }   
 
::-webkit-scrollbar-corner       { /* 6 */ }   
 
::-webkit-resizer                { /* 7 */ }   

<style>   
::-webkit-scrollbar {   
    width: 12px;   
}   
::-webkit-scrollbar-track {   
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    
    -webkit-border-radius: 10px;   
    border-radius: 10px;   
    border:1px solid #666666   
}   
::-webkit-scrollbar-thumb {   
    -webkit-border-radius: 10px;   
    border-radius: 10px;   
    background: rgba(255,0,0,0.8);    
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);    
}   
::-webkit-scrollbar-thumb:window-inactive {   
   
background: rgba(255,0,0,0.4);    
   
}   
   
.test{   
width:100px;   
height:200px;   
overflow:scroll;   
border:1px solid #666666;   
}   
</style>   
<div class="test">kfalsdfjlasjldf</div>   

来源：http://blog.csdn.net/china_skag/article/details/78219727