// 全局的滚动条样式
::-webkit-scrollbar { //滚动条的宽度
width: 4px;
height: 6px;
}
::-webkit-scrollbar-thumb { //滚动条的滑块
background-color: rgba(144, 147, 153, 0.6);
border-radius: 4px;
}
// 内容区滚动条划过加宽
.content>div>div::-webkit-scrollbar { // 内容区的滚动条宽度
width: 8px;
height: 8px;
}
.content>div>div::-webkit-scrollbar-thumb { // 内容区的滚动条滑块样式,这个是重点
background-color: rgba(144, 147, 153, 0.6);
border-radius: 4px;
border-style: dashed;
border-color: transparent;
border-width: 2px;
background-clip: padding-box;
}
.content>div>div::-webkit-scrollbar-thumb:hover { // 内容区滚动条滑块划过样式
background: rgba(144, 147, 153, 0.6);
}
【css】划过滚动条,滚动条加宽,划出时,变回原宽度
最新推荐文章于 2024-07-03 14:39:37 发布