css改变滚动条宽度

.hello{
  width: 400px;
  height: 200px;
  border: 1px solid gray;
  overflow: auto;
}
.hello::-webkit-scrollbar-thumb:vertical {
  background-color: #c0cedc;
  border-radius: 6px;
  outline: 1px solid rgba($color: #ffffff, $alpha: 0);
  outline-offset: -2px;
  border: 1px solid rgba($color: #ffffff, $alpha: 0);
  color: #e9e9e9;
}
.hello::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  border-radius: 10px;
}
.hello::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  border-radius: 10px;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44,rgb(60,186,146)),color-stop(0.72,rgb(253,187,45)),color-stop(0.86,rgb(253,187,45)));
  transition: 0.3s ease-in-out;
}
.hello::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.son{
  width: 400px;
  height: 400px;
}

<div class="hello">
   <div class="son"></div>
</div>

效果：