css改变滚动条样式

/* 滚动条整体样式外部 滚动条宽度和高度分别代表横竖滚动条的宽度和高度*/
*::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
/* 滚动条里面的上下箭头按钮,允许通过点击微调滚动条的位置 一般隐藏*/
*::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}
/* 滚动条横竖滚动条交汇样式 一般设置透明*/
*::-webkit-scrollbar-corner {
  background-color: transparent;
}
/* 滚动条内部 */
*::-webkit-scrollbar-thumb {
  border-radius: 8px;
  /* background-color: rgba(0, 0, 0, 0.3); */
  /* 不用bgc而用 border+box-shadow替代是为了让滚动条两边显示有一个空白的间隙 */
  border: 4px solid rgba(0,0,0,0);
  box-shadow: 8px 8px 0 #A5ADB7 inset;
}
/* 滚动条内部 鼠标经过样式*/
*::-webkit-scrollbar-thumb:hover {
  /* background-color: rgba(0, 0, 0, 0.5); */
  box-shadow: 8px 8px 0 #8A8A8A inset;
}
/* 滚动条轨道 设置透明*/
*::-webkit-scrollbar-track {
  border-radius: 8px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}