今天专门研究了一下滚动条的美化
全局样式滚动条
::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-thumb { border-radius: 10px; //-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background-color: #b9b9b9; } ::-webkit-scrollbar-track {
// 加不加这个阴影都可 //-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background-color: #f0f0f0; }
局部滚动条样式
.局部的类名 { max-height: 100vh; overflow-y: scroll;
::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-thumb { border-radius: 10px; //-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background-color: #b9b9b9; } ::-webkit-scrollbar-track {
// 加不加这个阴影都可 //-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background-color: #f0f0f0; }
}
标签:color,0.2,滚动条,scrollbar,关于,5px,webkit,美化 From: https://www.cnblogs.com/harryzong/p/16858020.html