NB的CSS樣式集錦1——CSS3捲軸美化,CSS3捲軸皮膚

標籤：back   color   http   img   美化   from   rom   important   parent   

轉自：http://www.pengyaou.com/codecss3/POKDNMS_112.html

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 }

          

 

NB的CSS樣式集錦1——CSS3捲軸美化,CSS3捲軸皮膚