/* 滚动条整体样式 */
::-webkit-scrollbar {
    width: 10px; /* 宽度对应横滚动条的尺寸，这里设置为10px */
    height: 10px; /* 高度对应竖滚动条的尺寸，这里设置为10px */
}

/* 滚动条里面的滑块样式 */
::-webkit-scrollbar-thumb {
    border-radius: 5px; /* 圆角，使滑块边缘更圆润 */
    background: linear-gradient(to bottom, #007bff, #00c6ff); /* 渐变背景，从蓝色到浅蓝色 */
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* 外阴影，增加立体感 */
    transition: background 0.3s ease; /* 过渡效果，使背景颜色变化更平滑 */
}

/* 鼠标悬停在滑块上时的样式 */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #0056b3, #0099ff); /* 鼠标悬停时的渐变背景，颜色更深 */
}

/* 滚动条里面的轨道样式 */
::-webkit-scrollbar-track {
    border-radius: 5px; /* 圆角，使轨道边缘更圆润 */
    background-color: #f0f0f0; /* 轨道背景颜色 */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* 内阴影，增加质感 */
}

/* 滚动条角落的样式（横竖滚动条交汇的地方） */
::-webkit-scrollbar-corner {
    background-color: #f0f0f0; /* 角落背景颜色，与轨道颜色一致 */
}