网页效果滚动条CSS样式

暂无AI摘要

摘要由智能技术生成

滚动条样式 CSS 代码

@charset "utf-8";
/* CSS Document */
/*—滚动条默认显示样式–*/
::-webkit-scrollbar-thumb{
background-color:#696969;
height:50px;
outline-offset:-2px;
outline:2px solid #F5F5F5;
-webkit-border-radius:4px;
border: 2px solid #F5F5F5;
}
 
/*—鼠标点击滚动条显示样式–*/
::-webkit-scrollbar-thumb:hover{
background-color:#DB7093;
height:50px;
-webkit-border-radius:4px;
}
 
/*—滚动条大小–*/
::-webkit-scrollbar{
width:10px;
height:18px;
}
 
/*—滚动框背景样式–*/
::-webkit-scrollbar-track-piece{
background-color:#F5F5F5;
-webkit-border-radius:0;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}