css滚动条样式

/* 自定义滚动条样式 */
/* 滚动条整体部分 */
::-webkit-scrollbar {
    width: 10px; /* 设置滚动条宽度 */
}

/* 滑块部分 */
::-webkit-scrollbar-thumb {
    background-color: #888; /* 设置滑块颜色 */
    border-radius: 5px; /* 设置滑块圆角 */
}

/* 轨道部分 */
::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 设置轨道颜色 */
}

/* 鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 设置悬停时滑块颜色 */
}

解释说明：

• ::-webkit-scrollbar：定义整个滚动条的宽度。
• ::-webkit-scrollbar-thumb：定义滚动条中的滑块样式，包括颜色和圆角。
• ::-webkit-scrollbar-track：定义滚动条的轨道样式，包括背景颜色。
• ::-webkit-scrollbar-thumb:hover：定义鼠标悬停在滑块上时的样式。

此代码适用于基于 WebKit 的浏览器（如 Chrome 和 Safari）。对于其他浏览器，可能需要额外的兼容性处理。