css3 滚动条美化 |css3按钮圆弧

/* 1. 隐藏默认滚动条样式 */
::-webkit-scrollbar {
display: none;
}
/* 2. 添加滚动条轨道样式 */
::-webkit-scrollbar-track {
background-color: #f0f0f0;
border-radius: 5px;
}
/* 3. 添加滚动条滑块样式 */
::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 5px;
}
/* 4. 悬停时添加滚动条滑块样式 */
::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
cursor: pointer;
}

上述代码中，大家首先使用::-webkit-scrollbar选择器来隐藏默认的滚动条样式。然后，使用::-webkit-scrollbar-track选择器来修改滚动条轨道的样式，如背景颜色、圆角等。接着，使用::-webkit-scrollbar-thumb选择器来修改滚动条滑块的样式，同样可以设置背景颜色、圆角等。最后，使用::-webkit-scrollbar-thumb:hover选择器来设置当用户悬停在滑块上时的样式，如背景颜色和指针样式。

除了以上选择器，CSS3 中还有很多可以用来美化滚动条的选择器和属性，如::-webkit-scrollbar-button用来设置滚动条按钮的样式，scrollbar-width属性用来设置整个滚动条的宽度等。大家可以根据需求选择使用这些选择器和属性，来打造一个更加独特、美观的滚动条。