CSS--超出就显示滚动条并设置滚动条的样式

在CSS中，要使得元素在内容超出时显示滚动条，并设置滚动条的样式，可以使用overflow属性来控制滚动条的行为，然后通过伪元素::-webkit-scrollbar和相关属性来定制滚动条的样式，但请注意这些样式主要适用于基于WebKit的浏览器，如Chrome和Safari。

以下是一个示例，展示了如何设置一个元素，在内容超出其尺寸时显示滚动条，并自定义滚动条的样式：

/* 设置需要显示滚动条的元素 */
.scrollable-content {
  width: 300px; /* 设置元素的宽度 */
  height: 200px; /* 设置元素的高度 */
  overflow: auto; /* 开启滚动条 */
}
 
/* 自定义滚动条样式 */
.scrollable-content::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度 */
}
 
.scrollable-content::-webkit-scrollbar-track {
  background: #f1f1f1; /* 设置滚动条轨道颜色 */
}
 
.scrollable-content::-webkit-scrollbar-thumb {
  background: #888; /* 设置滚动条滑块颜色 */
}
 
.scrollable-content::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬浮时滚动条滑块颜色 */
}

在HTML中，可以这样使用：

<div class="scrollable-content">
  这里是很长的内容，当超出容器的高度时，会显示滚动条。
  <!-- 内容 -->
</div>

请注意，为了兼容不同浏览器，可能需要添加额外的代码来定制其他浏览器的滚动条样式，比如Firefox使用的是scrollbar-color和scrollbar-width属性。