CSS设置超出范围滚动条和滚动条样式

在CSS中，可以使用overflow属性来控制内容超出容器范围时的滚动条行为，使用scrollbar-color属性（仅在WebKit/Blink引擎中有效）来控制滚动条的样式。

以下是一个示例，展示如何设置元素的滚动条：

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 12px; /* 设置滚动条的宽度 */
}
 
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 设置轨道的背景颜色 */
}
 
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background: #888; /* 设置滑块的背景颜色 */
}
 
/* 滚动条的滑块：当鼠标悬停时 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 设置悬停时滑块的背景颜色 */
}
 
/* 设置元素的滚动条行为 */
.scrollable-content {
  overflow-y: scroll; /* 垂直滚动条 */
  scrollbar-color: #888 #f1f1f1; /* 滚动条的颜色，先是滑块颜色，然后是轨道颜色 */
}

在HTML中，你可以这样使用这个类：

<div class="scrollable-content">
  <!-- 这里是可以滚动的内容 -->
</div>

请注意，::-webkit-scrollbar等伪元素仅在使用WebKit/Blink引擎的浏览器中有效，例如Chrome、Edge等。Firefox和其他浏览器可能需要不同的方法来自定义滚动条样式。