css3美化滾動條樣式

1.改變瀏覽器默認的滾動條樣式

::-webkit-scrollbar-track-piece { //滾動條凹槽的顏色，還可以設置邊框屬性
background-color:#f8f8f8;
}
::-webkit-scrollbar {//滾動條的寬度
width:9px;
height:9px;
}
::-webkit-scrollbar-thumb {//滾動條的設置
background-color:#dddddd;
background-clip:padding-box;
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}

2.給某個div  .test1加滾動條樣式

.test1::-webkit-scrollbar {
 width: 8px;
}
 .test1::-webkit-scrollbar-track {
 background-color:red;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 .test1::-webkit-scrollbar-thumb {
 background-color:green;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}

其他延伸(傳送):CSS3自定義滾動條樣式 -webkit-scrollbar