为网站浏览器页面添加侧边彩色滚动条

默认的浏览器侧边栏滚动条是普通的，当然，有些网站主题是自带美化

的浏览器侧边滚动栏不需要我们自己去美化，有些网站主题是没有美化浏览器侧边滚动栏的，

那么这时就需要我们去美化啦！今天就教大家如何自定义美化浏览器侧边滚动栏。其实非常简单，

只需一句代码的事情就可以自定义美化网站浏览器侧边滚动栏，并且代码适用于绝大多数网站。

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;  
}

多彩

/** 设置滚动条的宽度和高度 */
::-webkit-scrollbar {
  width: 10px;  /* 设置滚动条的宽度为10像素 */
  height: 1px;  /* 设置滚动条的高度为1像素 */
}

/** 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;  /* 设置滑块的背景颜色为#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);
  /* 设置滑块的背景图像为线性渐变，45度角度，使用rgba颜色和透明色交替形成条纹效果 */
}

/** 设置滚动条轨道的样式 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);  /* 设置轨道的内阴影效果，颜色为rgba(0,0,0,0.2) */
    background: #f6f6f6;  /* 设置轨道的背景颜色为#f6f6f6 */
}

把CSS代码复制到主题或者模板的 css文件末尾即可，是不是很简单赶紧试试吧！

Hackyh'Blog版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！