WordPress美化教程,添加侧边彩色滚动条

WordPress默认的浏览器侧边栏滚动条是非常丑陋的,当然,有些WordPress主题是自带美化的侧边滚动栏不需要我们自己去美化,有些WordPress主题是没有美化侧边滚动栏的,那么这时就需要我们去美化啦!星语站长今天就教大家如何自定义美化侧边滚动栏。其实非常简单,只需一句代码的事情就可以自定义美化WordPress侧边滚动栏,并且代码适用于绝大多数WordPress主题。

图片[1]WenGe博客-站长资源网专注福利技术教程活动软件-分享最具价值的内容-资源分享网WordPress添加侧边彩色滚动条WenGe博客-站长资源网专注福利技术教程活动软件-分享最具价值的内容-资源分享网WenGe博客

单色滚动条代码:

 /*滚动条显示样式*/  
 ::-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;  
   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;
 }

效果可见!

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论