- N +

给网站添加侧边彩色滚动条

给网站添加侧边彩色滚动条原标题:给网站添加侧边彩色滚动条

导读:

有些主题是自带美化的侧边滚动栏不需要我们自己去美化,有些主题是没有美化侧边滚动栏的,那么这时就需要我们去美化啦!...

网站默认的浏览器侧边栏滚动条是非常丑陋的,当然,有些主题是自带美化的侧边滚动栏不需要我们自己去美化,有些主题是没有美化侧边滚动栏的,那么这时就需要我们去美化啦!

单色滚动条CSS代码:

/*滚动条显示样式*/  
::-webkit-scrollbar-thumb{
   background-color:#FF6666;  /*更改喜欢的十六进制颜色*/
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #fff;  
   -webkit-border-radius:4px;  
   border: 2px solid #fff;  
}  
/*滚动条大小*/ 
::-webkit-scrollbar{  
   width:8px;  
   height:8px;  
}  
/*滚动框背景样式*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}

多色滚动条CSS代码:

/**彩色滚动条样式*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}
作者:队长不在家
舞台上有你,就演好角色; 舞台上没你,就静静地做观众;
微信扫一扫
返回列表
上一篇:
下一篇:

发表评论中国互联网举报中心

快捷回复:

    评论列表 (暂无评论,共134人参与)参与讨论

    还没有评论,来说两句吧...