CSS3 scroll bar beautification, CSS3 scrollbar skin

Css3-webkit-scrollbar scroll bar skin beautification implementation, using-webkit-scrollbar,-webkit-scrollbar-track,- Webkit-scrollbar-thumb these 2 properties to set a different style of scroll bar.

Here are 5 scroll bar styles.

CSS Code

1. test1::-webkit-ScrollBar {//width of scroll bar2 width:8px; 3 }4. test1::-webkit-scrollbar-Track {//scroll bar style5background-color:#808080;6-webkit-border-Radius:2em;7-moz-border-Radius:2em;8border-Radius:2em;9 }Ten. test1::-webkit-scrollbar-style of thumb {//scroll slider Onebackground-color: #ff4400; A-webkit-border-Radius:2em; --moz-border-Radius:2em; -border-Radius:2em; the } -. test2::-webkit-ScrollBar { - width:8px; - } +. test2::-webkit-scrollbar-Track { -background-color: #fff; +-webkit-border-Radius:2em; A-moz-border-Radius:2em; atborder-Radius:2em; - border:1px solid #ccc; - } -. test2::-webkit-scrollbar-Thumb { -background-color: #F90; -Background-image:-webkit-linear-gradient (45deg, Rgba (255,255,255, .4) -%, transparent -%, transparent -%, Rgba (255,255,255, .4) -%, Rgba (255,255,255, .4) the%, transparent the%, transparent); in-webkit-border-Radius:2em; --moz-border-Radius:2em; toborder-Radius:2em; + } -. test3::-webkit-ScrollBar { the width:12px; * } $. test3::-webkit-scrollbar-Track {Panax Notoginsengbackground-color: #f5f5f5; --webkit-border-Radius:2em; the-moz-border-Radius:2em; +border-Radius:2em; A } the. test3::-webkit-scrollbar-Thumb { +border-radius:10px; -background-color: #FFF; $Background-image:-webkit-gradient (Linear, +%0%, the% -%, from(#4D9C41), to (#19911D), Color-stop (.6, #54DE5D)); $-webkit-border-Radius:2em; --moz-border-Radius:2em; -border-Radius:2em; the } - . test4{Wuyi width:500px; theOverflow:scroll!important; - width:600px; Wu } -.test4>div{ About width:1000px; $ } -. test4::-webkit-ScrollBar { - width:12px; - height:12px; A } +. test4::-webkit-scrollbar-Track { thebackground-color: #f5f5f5; --webkit-border-Radius:2em; $-moz-border-Radius:2em; theborder-Radius:2em; the } the. test4::-webkit-scrollbar-Thumb { theborder-radius:10px; -background-color: #F90; inBackground-image:-webkit-linear-gradient (90deg, Rgba (255,255,255, .4) -%, transparent -%, transparent -%, Rgba (255,255,255, .4) -%, Rgba (255,255,255, .4) the%, transparent the%, transparent); the-webkit-border-Radius:2em; the-moz-border-Radius:2em; Aboutborder-Radius:2em; the } the. test5::-webkit-ScrollBar { the width:12px; + height:12px; - } the. test5::-webkit-scrollbar-Track {Bayibackground-color: #f5f5f5; the   the } -. test5::-webkit-scrollbar-Thumb { -background-color: #d52828; the}

CSS3 scroll bar beautification, CSS3 scrollbar skin