CSS3滚动条美化,CSS3滚动条皮肤

CSS3 -webkit-scrollbar滚动条皮肤美化实现，利用-webkit-scrollbar，-webkit-scrollbar-track，-webkit-scrollbar-thumb这2个属性设置不同样式的滚动条。

下面是5个滚动条样式。

css代码

 .test1::-webkit-scrollbar {     //滚动条的宽度
  width: 8px;
 }
  .test1::-webkit-scrollbar-track {    //滚动条的样式
  background-color:#;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
 }
  .test1::-webkit-scrollbar-thumb {   //滚动滑块的样式
  background-color:#ff4400;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
 }
 .test2::-webkit-scrollbar {
  width: 8px;
 }
  .test2::-webkit-scrollbar-track {
  background-color:#fff;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
  border:1px solid #ccc;
 }
  .test2::-webkit-scrollbar-thumb {
  background-color: #F90;
  background-image: -webkit-linear-gradient(45deg,  rgba(, , , .) %,  transparent %,  transparent %,  rgba(, , , .) %,  rgba(, , , .) %,  transparent %,  transparent);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
 }
 .test3::-webkit-scrollbar {
  width: 12px;
 }
  .test3::-webkit-scrollbar-track {
  background-color:#f5f5f5;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
 }
  .test3::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #FFF;
  background-image: -webkit-gradient(linear,  % %,  % %,  from(#4D9C41),  to(#19911D),  color-stop(., #54DE5D));
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
 }
 .test4{
     width:500px;
     overflow:scroll !important;
     width:600px;
 }
 .test4>div{
     width:1000px;
 }
 .test4::-webkit-scrollbar {
  width: 12px;
  height:12px;
 }
  .test4::-webkit-scrollbar-track {
  background-color:#f5f5f5;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
 }
  .test4::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #F90;
   background-image: -webkit-linear-gradient(90deg,  rgba(, , , .) %,  transparent %,  transparent %,  rgba(, , , .) %,  rgba(, , , .) %,  transparent %,  transparent);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
 }
 .test5::-webkit-scrollbar {
  width: 12px;
  height:12px;
 }
  .test5::-webkit-scrollbar-track {
  background-color:#f5f5f5;

 }
  .test5::-webkit-scrollbar-thumb {
  background-color: #d52828;
 }