Zibll子比主题修改侧边滚动条使变成彩色美化教程

前言

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

图片[1]-Zibll子比主题修改侧边滚动条使变成彩色美化教程-宅学院

教程

1.将下方代码放到网站管理后台—》主题设置—》自定义代码—》自定义css代码,把下面的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;    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
支持博主,更新加速
点赞1支持 分享
评论一下 抢沙发

请登录后发表评论

    请登录后查看评论内容