css3 设置滚动条样式

CSS3 可以让我们非常方便地修改滚动条样式。使用伪元素选择器：-webkit-scrollbar、-moz-scrollbar、-ms-scrollbar和scrollbar来设置样式。

/* Webkit web浏览器 */::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-thumb {
    background-color: #cdd1d9;
    border-radius: 6px;
}
::-webkit-scrollbar-track {
    background-color: #f5f6fa;
    border-radius: 6px;
}
/* Firefox浏览器 */scrollbar {
    width: 12px;
    height: 12px;
}
scrollbar-thumb {
    background-color: #cdd1d9;
    border-radius: 6px;
}
scrollbar-track {
    background-color: #f5f6fa;
    border-radius: 6px;
}
/* IE浏览器 */::-ms-scrollbar {
    width: 12px;
    height: 12px;
}
::-ms-scrollbar-thumb {
    background-color: #cdd1d9;
    border-radius: 6px;
}
::-ms-scrollbar-track {
    background-color: #f5f6fa;
    border-radius: 6px;
}
    

以上代码分别设置了webkit、Firefox和IE浏览器中滚动条的样式。其中包括了滚动条的宽度、高度、颜色等。

需要注意的是，-moz-scrollbar只能在Firefox浏览器中使用。

在实际使用过程中，可以根据自己的需求来修改样式，增加滚动条样式，提高页面美观度。

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