0
点赞
收藏
分享

微信扫一扫

css美化滚动条

朱小落 2022-01-06 阅读 150
csscss3html

效果
在这里插入图片描述

代码

/*
滚动条美化
 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 7px;
    height: 7px;
    background-color: #f7f7f7;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px #cfcfd1;
    -webkit-box-shadow: inset 0 0 6px #cfcfd1;
    border-radius: 10px;
    background-color:#f7f7f7;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    box-shadow: inset 0 0 6px #cfcfd1;
    -webkit-box-shadow: inset 0 0 6px #cfcfd1;
    background-color: #cfcfd1;
}
举报

相关推荐

0 条评论