css3 滚动条美化代码

CSS3滚动条美化已经成为Web设计师们对网页美化的必备技能之一。下面我们来分享一些有用的滚动条美化代码。

/*滚动条基本样式*/::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #e6e6e6;
}
/*滚动条滑块悬停样式*/::-webkit-scrollbar-thumb:hover {
    background-color: #c9c9c9;
}
/*滚动条滑块样式*/::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #9b9b9b;
}
/*滚动条轨道滑块按压后的样式*/::-webkit-scrollbar-thumb:active {
    background-color: #7a7a7a;
}
/*滚动条轨道背景以及轨道宽度和高度*/::-webkit-scrollbar-track {
    border-radius: 3px;
    background-color: #e6e6e6;
    width: 6px;
    height: 6px;
}
    

以上代码适用于谷歌浏览器，对于Firefox和IE浏览器也有相应的滚动条美化代码。

美化滚动条可以增加网页的视觉感受度，更好的展现页面设计师们的美感，同时也可以提高用户的体验感，使用户产生愉悦的感觉。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！