css滚动条美化样式 |css抓取工具

/* 隐藏滚动条并添加自定义样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
display: none;
}
/* 滑块样式 */
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #444;
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
background-color: #f7f7f7;
border-radius: 8px;
}

上面的代码可以将滚动条隐藏，并添加一个样式良好的滑块和轨道元素。其中，::-webkit-scrollbar可以控制整个滚动条的样式，::-webkit-scrollbar-thumb可以控制滑块的样式，::-webkit-scrollbar-track可以控制滚动条轨道的样式。

/* 横向滚动条样式 */
::-webkit-scrollbar {
height: 12px;
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/* 纵向滚动条样式 */
::-webkit-scrollbar {
width: 12px;
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}

上面的代码可以添加横向和纵向滚动条，并设置它们的样式。其中，::-webkit-scrollbar可以设置滚动条的长度和背景颜色，::-webkit-scrollbar-thumb可以设置滑块的背景颜色和边角弧度，::-webkit-scrollbar-thumb:hover可以设置滑块的鼠标悬停时的背景颜色。

总的来说，使用CSS滚动条美化样式可以极大地提高页面的美观程度和用户体验。除了上述样式外，还有很多其他的滚动条样式可供选择，需要根据实际情况和需求来选择。