SS3 -webkit-scrollbar滚动条皮肤美化实现，利用-webkit-scrollbar，-webkit-scrollbar-track，-webkit-scrollbar-thumb这2个属性设置不同样式的滚动条。
下面是5个滚动条样式。
css代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
.test
1:
:-webkit-scrollbar {
width
:
8px
;
}
.test
1:
:-webkit-scrollbar-track {
background-color
:
#808080
;
-webkit-border-radius:
2em
;
-moz-border-radius:
2em
;
border-radius:
2em
;
}
.test
1:
:-webkit-scrollbar-thumb {
background-color
:
#ff4400
;
-webkit-border-radius:
2em
;
-moz-border-radius:
2em
;
border-radius:
2em
;
}
.test
2:
:-webkit-scrollbar {
width
:
8px
;
}
.test
2:
:-webkit-scrollbar-track {
background-color
:
#fff
;
-webkit-border-radius:
2em
;
-moz-border-radius:
2em
;
border-radius:
2em
;
border
:
1px
solid
#ccc
;
}
.test
2:
:-webkit-scrollbar-thumb {
background-color
:
#F90
;
background-image
: -webkit-linear-gradient(
45
deg, 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
);
-webkit-border-radius:
2em
;
-moz-border-radius:
2em
;
border-radius:
2em
;
}
.test
3:
:-webkit-scrollbar {
width
:
12px
;
}
.test
3:
:-webkit-scrollbar-track {
background-color
:
#f5f5f5
;
-webkit-border-radius:
2em
;
-moz-border-radius:
2em
;
border-radius:
2em
;
}
.test
3:
:-webkit-scrollbar-thumb {
border-radius:
10px
;
background-color
:
#FFF
;
background-image
: -webkit-gradient(linear,
40%
0%
,
75%
84%
, from(
#4D9C41
), to(
#19911D
), color-stop(.
6
,
#54DE5D
));
-webkit-border-radius:
2em
;
-moz-border-radius:
2em
;
border-radius:
2em
;
}
.test
4
{
width
:
500px
;
overflow
:
scroll
!important
;
width
:
600px
;
}
.test
4
>div{
width
:
1000px
;
}
.test
4:
:-webkit-scrollbar {
width
:
12px
;
height
:
12px
;
}
.test
4:
:-webkit-scrollbar-track {
background-color
:
#f5f5f5
;
-webkit-border-radius:
2em
;
-moz-border-radius:
2em
;
border-radius:
2em
;
}
.test
4:
:-webkit-scrollbar-thumb {
border-radius:
10px
;
background-color
:
#F90
;
background-image
: -webkit-linear-gradient(
90
deg, 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
);
-webkit-border-radius:
2em
;
-moz-border-radius:
2em
;
border-radius:
2em
;
}
.test
5:
:-webkit-scrollbar {
width
:
12px
;
height
:
12px
;
}
.test
5:
:-webkit-scrollbar-track {
background-color
:
#f5f5f5
;
}
.test
5:
:-webkit-scrollbar-thumb {
background-color
:
#d52828
;
}
彭亚欧个人博客原创文章,转载请注明出处 |
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
