好看的滚动条样式
时间: 2023-07-20 10:19:29 浏览: 51
下面是一些常见的好看的滚动条样式,你可以根据自己的喜好进行选择:
1. 自定义滚动条样式:
```css
/*滚动条整体样式*/
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/*滚动条轨道样式*/
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
/*滚动条滑块样式*/
::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 3px;
}
/*滚动条滑块悬停样式*/
::-webkit-scrollbar-thumb:hover {
background-color: #666;
}
```
2. Mac风格滚动条样式:
```css
/*滚动条整体样式*/
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
/*滚动条轨道样式*/
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
/*滚动条滑块样式*/
::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 6px;
}
/*滚动条滑块悬停样式*/
::-webkit-scrollbar-thumb:hover {
background-color: #666;
}
```
3. Material Design风格滚动条样式:
```css
/*滚动条整体样式*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/*滚动条轨道样式*/
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
/*滚动条滑块样式*/
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 5px;
}
/*滚动条滑块悬停样式*/
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
```
希望这些滚动条样式能够帮到你!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)