[Web相关学习] 修改浏览器默认滚动条样式

效果欣赏

在根目录css文件下面加上css样式，诺，就酱紫↓

/*滚动条的宽高*/
::-webkit-scrollbar {
    width: 10px
}
 
/*滚动条父元素背景*/
::-webkit-scrollbar-track-piece {
    /*background-color:#fff;*/
    /*border:1px solid #ccc;*/
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
}
 
/*滚动条的自定义样式*/
::-webkit-scrollbar-thumb {
    background-color: #F10;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%,
    transparent 25%, transparent 50%,
    rgba(255, 255, 255, .4) 50%,
    rgba(255, 255, 255, .4) 75%,
    transparent 75%, transparent);
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
}
 
/*鼠标触摸后的样式*/
::-webkit-scrollbar-thumb:hover {
    background-color: #F90;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%,
    transparent 25%, transparent 50%,
    rgba(255, 255, 255, .4) 50%,
    rgba(255, 255, 255, .4) 75%,
    transparent 75%, transparent);
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
}