[分享]css3控制滚动条

CSS3提供了一些新的伪元素，可以用来控制滚动条的样式。在使用这些伪元素时，我们需要使用下面的CSS属性： /控制滚动条元素/ ::webkitscrollbar { width: 10px; /设置...

CSS3提供了一些新的伪元素，可以用来控制滚动条的样式。在使用这些伪元素时，我们需要使用下面的CSS属性：

 /*控制滚动条元素*/
    ::-webkit-scrollbar {
        width: 10px;                    /*设置滚动条宽度*/
        height: 10px;                   /*设置滚动条高度*/
    }

    /*控制滚动条轨道*/
    ::-webkit-scrollbar-track {
        background-color: #f5f5f5;      /*设置轨道背景色*/
    }

    /*控制滚动条滑块*/
    ::-webkit-scrollbar-thumb {
        background-color: #dcdcdc;      /*设置滑块背景色*/
        border: 2px solid #fff;         /*设置滑块边框样式*/
        border-radius: 10px;            /*设置滑块边框的圆角*/
    }

    /*控制滚动条角落*/
    ::-webkit-scrollbar-corner {
        background-color: #f5f5f5;      /*设置角落背景色*/
    } 

其中，::-webkit-scrollbar是用来设置滚动条元素的样式；::-webkit-scrollbar-track用来控制滚动条轨道的样式；::-webkit-scrollbar-thumb用来控制滚动条滑块的样式；::-webkit-scrollbar-corner用来控制滚动条转角的样式。

有了这些CSS属性，我们就可以自定义滚动条的样式，并且让网页更加美观。