[分享]css3怎么美化滚动条

CSS3已经成为网页设计中不可或缺的一部分。它不仅可以美化网页的布局和样式，还可以美化滚动条，增加网页的美感。下面介绍如何使用CSS3来美化滚动条：/ 隐藏系统默认滚动条 / ::webkitscro...

CSS3已经成为网页设计中不可或缺的一部分。它不仅可以美化网页的布局和样式，还可以美化滚动条，增加网页的美感。

下面介绍如何使用CSS3来美化滚动条：

/* 隐藏系统默认滚动条 */
::-webkit-scrollbar {
    display: none;
}

/* 美化滚动条背景 */
body {
    background: #f1f1f1;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* 美化滚动条thumb（拖动柄） */
body::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 20px;
    border: 3px solid #f1f1f1;
}

/* 美化滚动条track（滚动条轨道） */
body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 20px;
    box-shadow: inset 7px 10px 12px #f0f0f0;
} 

上面的CSS代码中，通过调整参数值来美化滚动条。其中，::-webkit-scrollbar 是用来指定所有滚动条样式；::-webkit-scrollbar-thumb 是用来指定拖动柄样式；::-webkit-scrollbar-track 是用来指定滑轨轴样式。

通过以上方式，可以很容易地美化滚动条，让网页变得更加美观、舒适。