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

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

下面是5个滚动条样式。

css代码

 1 .test1::-webkit-scrollbar {     //滚动条的宽度
 2  width: 8px;
 3 }
 4  .test1::-webkit-scrollbar-track {    //滚动条的样式
 5  background-color:#808080;
 6  -webkit-border-radius: 2em;
 7  -moz-border-radius: 2em;
 8  border-radius:2em;
 9 }
10  .test1::-webkit-scrollbar-thumb {   //滚动滑块的样式
11  background-color:#ff4400;
12  -webkit-border-radius: 2em;
13  -moz-border-radius: 2em;
14  border-radius:2em;
15 }
16 .test2::-webkit-scrollbar {
17  width: 8px;
18 }
19  .test2::-webkit-scrollbar-track {
20  background-color:#fff;
21  -webkit-border-radius: 2em;
22  -moz-border-radius: 2em;
23  border-radius:2em;
24  border:1px solid #ccc;
25 }
26  .test2::-webkit-scrollbar-thumb {
27  background-color: #F90;
28  background-image: -webkit-linear-gradient(45deg,  rgba(255, 255, 255, .4) 25%,  transparent 25%,  transparent 50%,  rgba(255, 255, 255, .4) 50%,  rgba(255, 255, 255, .4) 75%,  transparent 75%,  transparent);
29  -webkit-border-radius: 2em;
30  -moz-border-radius: 2em;
31  border-radius:2em;
32 }
33 .test3::-webkit-scrollbar {
34  width: 12px;
35 }
36  .test3::-webkit-scrollbar-track {
37  background-color:#f5f5f5;
38  -webkit-border-radius: 2em;
39  -moz-border-radius: 2em;
40  border-radius:2em;
41 }
42  .test3::-webkit-scrollbar-thumb {
43  border-radius: 10px;
44  background-color: #FFF;
45  background-image: -webkit-gradient(linear,  40% 0%,  75% 84%,  from(#4D9C41),  to(#19911D),  color-stop(.6, #54DE5D));
46  -webkit-border-radius: 2em;
47  -moz-border-radius: 2em;
48  border-radius:2em;
49 }
50 .test4{
51     width:500px;
52     overflow:scroll !important;
53     width:600px;
54 }
55 .test4>div{
56     width:1000px;
57 }
58 .test4::-webkit-scrollbar {
59  width: 12px;
60  height:12px;
61 }
62  .test4::-webkit-scrollbar-track {
63  background-color:#f5f5f5;
64  -webkit-border-radius: 2em;
65  -moz-border-radius: 2em;
66  border-radius:2em;
67 }
68  .test4::-webkit-scrollbar-thumb {
69  border-radius: 10px;
70  background-color: #F90;
71   background-image: -webkit-linear-gradient(90deg,  rgba(255, 255, 255, .4) 25%,  transparent 25%,  transparent 50%,  rgba(255, 255, 255, .4) 50%,  rgba(255, 255, 255, .4) 75%,  transparent 75%,  transparent);
72  -webkit-border-radius: 2em;
73  -moz-border-radius: 2em;
74  border-radius:2em;
75 }
76 .test5::-webkit-scrollbar {
77  width: 12px;
78  height:12px;
79 }
80  .test5::-webkit-scrollbar-track {
81  background-color:#f5f5f5;
82
83 }
84  .test5::-webkit-scrollbar-thumb {
85  background-color: #d52828;
86 }