css设置滚动条颜色的方法-webkit-scrollbar

CSS如何设置滚动条颜色 想要让网页变得更加美观，其中一个方法就是设置滚动条的颜色。下面就来介绍一下如何使用CSS来设置滚动条颜色。 首先，我们需要在CSS中使用::-webkit-scrollbar来定位滚动条。我们可以使用 background-color 和 border-radius 分别修改滚动条的背景颜色和圆角程度，如下所示：

::-webkit-scrollbar 

{background-color: #F1F1F1;border-radius: 10px;}

接着，我们要在CSS中指定滚动条上下文里的thumb（拖拽条）和track（包含thumb的轨迹）的颜色。我们可以使用background 和 border-radius 分别为thumb和track设置背景颜色和圆角程度，如下所示：

::-webkit-scrollbar-thumb 

{background-color: #777;border-radius: 10px;}

::-webkit-scrollbar-track 

{background-color: #F1F1F1;border-radius: 10px;}

最后，我们要在上述代码后面添加以下代码来修改滚动条的滑块尺寸：

::-webkit-scrollbar-thumb 

{height: 50px;}

如果想要在其他浏览器中也能够设置滚动条颜色，可以加上类似于下面的代码：

*::-webkit-scrollbar

 {background-color: #F1F1F1;border-radius: 10px;}

 *::-webkit-scrollbar-thumb 

 {background-color: #777;border-radius: 10px;}

 *::-webkit-scrollbar-track 

 {background-color: #F1F1F1;border-radius: 10px;}

 *::-webkit-scrollbar-thumb:horizontal 

 {height: 50px;}

 *::-webkit-scrollbar-thumb:vertical 

 {width: 50px;}

以上就是使用CSS来设置滚动条颜色的方法，希望对大家有所帮助！