174 字
1 分钟
浏览器滚动条样式设置
/*谷歌、safari、qq浏览器、360浏览器滚动条样式*/
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 8px;
height: 110px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-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;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #009688;
}
/*滑块效果*/
::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.4);
}
/*IE滚动条颜色*/
html {
scrollbar-face-color: #009688; /*滚动条颜色*/
scrollbar-highlight-color: #000;
scrollbar-3dlight-color: #000;
scrollbar-darkshadow-color: #000;
scrollbar-Shadow-color: #adadad; /*滑块边色*/
scrollbar-arrow-color: rgba(0, 0, 0, 0.4); /*箭头颜色*/
scrollbar-track-color: #eeeeee; /*背景颜色*/
}
浏览器滚动条样式设置
https://fuwari.vercel.app/posts/浏览器滚动条样式设置/