CSS改滚动条样式

CSS代码不怎么难，因此我不解释代码了。

具体代码如下：

::-webkit-scrollbar{
width:17px;
height:0px;
background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(202,202,202,0.07)),color-stop(100%,rgba(229,229,229,0.07)));
background:-webkit-linear-gradient(left,rgba(202,202,202,0.07) 0%,rgba(229,229,229,0.07) 100%);
background-color:rgba(229,229,229,.3);
-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;
box-shadow:0 0 2px  0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;
overflow:visible;
border-radius:4px;
border:solid 2px #A6A6A6;
}


::-webkit-scrollbar-button{
width:0; 
height:0; 
display:block; 
background-color:transparent;
}


::-webkit-scrollbar-thumb{
background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(233,233,233,0.05)),color-stop(100%,rgba(221,221,221,0.05)));
background:-webkit-linear-gradient(left,rgba(233,233,233,0.05) 0%,rgba(221,221,221,0.05) 100%);
-webkit-box-shadow:0 2px 1px 0 rgba(0,0,0,.05),inset 1px 1px 0 0 #FFF;
box-shadow:0 2px 1px 0 rgba(0,0,0,.05),inset 1px 1px 0 0 #FFF;
background-color:rgba(229,229,229,.9);
overflow:visible;
border-radius:4px;
border:solid 3px #A6A6A6;
}


::-webkit-scrollbar-thumb:active{
background-color:rgba(229,229,229,1); 
-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset;
box-shadow:0 0 2px 0 rgba(0,0,0,.15) inset;
}


::-webkit-scrollbar-thumb:hover{
background-color:rgba(229,229,229,.4);
}


::-webkit-scrollbar-corner {}


::-webkit-resizer {}


::-webkit-scrollbar-track {}


::-webkit-scrollbar-track-piece {}

 

注意：-webkit-是专门针对chrome和苹果浏览器Safari的，如果要针对Firefox和Opera分别应该加-moz-和-o-。学习css就是要不段地去试，最终才能达到好的样式。希望大家学有所长。