css 网页滚动条样式

在网页中，滚动条是一个很常见的东西，不过默认的滚动条样式可能并不符合我们的需求，这时候我们就可以使用CSS来改变滚动条样式。

首先，我们需要为滚动条指定一个样式。可以使用以下代码：

/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 12px;
}

/* Track样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Thumb样式 */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Hover时Thumb的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

上面的代码中，::-webkit-scrollbar用于定义整个滚动条的样式，其中width属性用于设置滚动条宽度。

而::webkit-scrollbar-track用于设置滚动条背景颜色，而::-webkit-scrollbar-thumb则用于设置滚动条滑块的样式。我们可以通过设置background属性来改变它们的颜色。

此外，我们还可以通过设置::-webkit-scrollbar-corner样式来为滚动条添加边角：

/* 设置滚动条边角 */
::-webkit-scrollbar-corner {
  background: #f1f1f1;
}

总之，使用CSS样式去改变滚动条样式是非常简单的。只要了解一些基础的CSS语法，就可以根据自己的需求对滚动条造型了。