当我们在网页上使用滚动条时，通常会发现浏览器默认的滚动条不够美观，这时我们可以使用 CSS 来设置滚动条的样式。

CSS 设置滚动条样式的实例代码

1. 设置滚动条的样式

可以使用 CSS 的 ::-webkit-scrollbar 伪类来设置滚动条的样式。在这里，我们将通过代码示例来演示如何设置滚动条的背景色、滑块颜色和宽度等属性。

/* 设置滚动条的背景颜色和宽度 */
::-webkit-scrollbar {
  width: 10px; /* 宽度 */
  background-color: #f5f5f5; /* 背景颜色 */
}

/* 设置滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #ff9c8f; /* 滑块颜色 */
  border-radius: 10px; /* 圆角 */
}

/* 鼠标悬浮在滑块上时的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #ff6666; /* 高亮颜色 */
}

使用以上代码设置滚动条的样式后，我们可以看到一个宽度为 10px，背景颜色为 #f5f5f5，滑块颜色为 #ff9c8f，圆角为 10px 的滚动条。

2. 设置自定义滑块图片

除了使用纯色设置滑块样式外，我们还可以使用图片来设置滑块样式。

/* 使用图片作为滑块 */
::-webkit-scrollbar-thumb {
  background-image: url('scrollbar-thumb.png'); /* 图片地址 */
  background-repeat: no-repeat; /* 不重复 */
  background-size: cover; /* 充满滑块大小 */
  border: none; /* 去掉边框 */
}

使用以上代码，我们可以将 scrollbar-thumb.png 图片作为滑块，并设置滑块不重复，充满滑块大小，并去掉边框，从而实现自定义滑块样式。

以上是 CSS 设置滚动条样式的实例代码和攻略，通过以上代码示例和说明，我们可以轻松地设置优美的滚动条样式。