/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 7px; height: 7px; background-color: #f5f5f5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #f5f5f5; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: #c8c8c8; }
代码2
/*滚动轴样式*/ @media screen and (min-width:768px) { /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 8px; height: 9px; background: transparent; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #c1c1c1; } ::-webkit-scrollbar-thumb:hover { background-color: #a8a8a8; } .mini-bar::-webkit-scrollbar { width: 5px; height: 5px; } .mini-bar::-webkit-scrollbar-thumb { border-radius: 3px; } }
标签:color,6px,滚动条,scrollbar,css,background,webkit,美化 From: https://www.cnblogs.com/panziwen/p/16772857.html