css改变滚动条样式
/* 滚动条整体样式外部 滚动条宽度和高度分别代表横竖滚动条的宽度和高度*/
*::-webkit-scrollbar {
width: 16px;
height: 16px;
}
/* 滚动条里面的上下箭头按钮,允许通过点击微调滚动条的位置 一般隐藏*/
*::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
/* 滚动条横竖滚动条交汇样式 一般设置透明*/
*::-webkit-scrollbar-corner {
background-color: transparent;
}
/* 滚动条内部 */
*::-webkit-scrollbar-thumb {
border-radius: 8px;
/* background-color: rgba(0, 0, 0, 0.3); */
/* 不用bgc而用 border+box-shadow替代是为了让滚动条两边显示有一个空白的间隙 */
border: 4px solid rgba(0,0,0,0);
box-shadow: 8px 8px 0 #A5ADB7 inset;
}
/* 滚动条内部 鼠标经过样式*/
*::-webkit-scrollbar-thumb:hover {
/* background-color: rgba(0, 0, 0, 0.5); */
box-shadow: 8px 8px 0 #8A8A8A inset;
}
/* 滚动条轨道 设置透明*/
*::-webkit-scrollbar-track {
border-radius: 8px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}
发表评论 (审核通过后显示评论)：