css 设置scrollba圆角背景，圆角滑动条

要设置滚动条的圆角背景和圆角滑块，你可以使用 CSS 的 `-webkit-scrollbar` 相关属性来进行样式设置。以下是一个示例：

::-webkit-scrollbar {
  width: 10px;
  background-color: #f1f1f1;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 8px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 8px;
}

在上述代码中，`::-webkit-scrollbar` 是用于设置整个滚动条样式的伪类选择器。通过调整 `width` 属性，可以改变滚动条的宽度。通过将 `background-color` 属性设置为所需的颜色，可以设置滚动条的背景色。`border-radius` 属性用于设置滚动条的圆角。

`::-webkit-scrollbar-thumb` 用于设置滚动条滑块的样式。你可以在 `background-color` 属性中设置所需的颜色，并使用 `border-radius` 属性来控制滑块的圆角。

`::-webkit-scrollbar-track` 用于设置滚动条轨道的样式。同样地，你可以在 `background-color` 属性中设置所需的颜色，并使用 `border-radius` 属性来控制轨道的圆角。

确保将上述样式应用于你想要自定义样式的滚动条上，例如：

div::-webkit-scrollbar {
  width: 10px;
  background-color: #f1f1f1;
  border-radius: 8px;
}

div::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 8px;
}

div::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 8px;
}

这样，你就可以设置滚动条的圆角背景和圆角滑块了。记得浏览器要支持 `-webkit` 前缀才能生效。