CSS 滚动条设置：显示方式、样式修改

在CSS中，可以使用::-webkit-scrollbar伪元素及其关联的伪元素来自定义滚动条的显示样式。以下是一个示例，展示了如何自定义滚动条的宽度、颜色和背景。

/* 设置滚动条的宽度和背景色 */
::-webkit-scrollbar {
    width: 12px; /* 水平滚动条的高度、垂直滚动条的宽度 */
    background-color: #f9f9f9; /* 滚动条的背景色 */
}
 
/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
    border-radius: 10px; /* 滑块的圆角 */
    background-color: #c1c1c1; /* 滑块的背景色 */
}
 
/* 设置滚动条滑块在hover时的样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
}
 
/* 设置滚动条轨道的样式 */
::-webkit-scrollbar-track {
    border-radius: 10px; /* 轨道的圆角 */
    box-shadow: inset 0 0 5px grey; /* 轨道的阴影效果 */
}

请注意，这些样式只在使用Webkit内核的浏览器中有效，例如Chrome和Safari。Firefox和其他浏览器可能需要不同的方法或者不支持这种自定义。

对于Firefox，可以使用以下属性：

/* Firefox 滚动条宽度和颜色 */
* {
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: #c1c1c1 #f9f9f9; /* 滑块颜色 轨道颜色 */
}

对于IE和Edge浏览器，可以使用以下属性：

/* IE 和 Edge 滚动条宽度和颜色 */
body {
  -ms-overflow-style: thin; /* "auto" or "thin" */
  scrollbar-color: #c1c1c1 #f9f9f9; /* 滑块颜色 轨道颜色 */
}

这些代码示例展示了如何自定义滚动条的外观，包括大小、颜色、圆角和轨道样式。根据需求，可以进一步调整这些属性以适应网站的设计风格。