(轉(zhuǎn)載) css3美化滾動(dòng)條樣式
原文鏈接:https://www.cnblogs.com/olive27/p/6640029.html
1.改變?yōu)g覽器默認(rèn)的滾動(dòng)條樣式
::-webkit-scrollbar-track-piece { //滾動(dòng)條凹槽的顏色,還可以設(shè)置邊框?qū)傩?background-color:#f8f8f8;
}
::-webkit-scrollbar {//滾動(dòng)條的寬度
width:9px;
height:9px;
}
::-webkit-scrollbar-thumb {//滾動(dòng)條的設(shè)置
background-color:#dddddd;
background-clip:padding-box;
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}
2.給某個(gè)div .test1加滾動(dòng)條樣式
.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;
}