css3 滚动条美化代码
导读:CSS3滚动条美化已经成为Web设计师们对网页美化的必备技能之一。下面我们来分享一些有用的滚动条美化代码。/*滚动条基本样式*/::-webkit-scrollbar {width: 6px;height: 6px;background-c...
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核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css3 滚动条美化代码
本文地址: https://pptw.com/jishu/568047.html
