WordPress主题如何将侧边滚动条变成彩色

建站学习50

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

WordPress主题如何将侧边滚动条变成彩色文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23323.html

本文内容来源： 星光博客文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23323.html

教程讲解/使用教程

一般主题都会自带自定义代码这样主题设置的，只需在主题设置自定义CSS代码里面添加美化的css代码就即可美化啦!文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23323.html

如果主题没有自定义代码那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外CSS”里面美化的css代码就即可美!文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23323.html

单色滚动条代码：

  1. /*滚动条显示样式*/
  2. ::-webkit-scrollbar-thumb{
  3. background-color:#FF6666; /*更改喜欢的十六进制颜色*/
  4. height:50px;
  5. outline-offset:-2px;
  6. outline:2px solid #fff;
  7. -webkit-border-radius:4px;
  8. border: 2px solid #fff;
  9. }
  10. /*滚动条大小*/
  11. ::-webkit-scrollbar{
  12. width:8px;
  13. height:8px;
  14. }
  15. /*滚动框背景样式*/
  16. ::-webkit-scrollbar-track-piece{
  17. background-color:#fff;
  18. -webkit-border-radius:0;
  19. }

彩色滚动条代码：

  1. /**彩色滚动条样式*/
  2. ::-webkit-scrollbar {
  3. width: 10px;
  4. height: 1px;
  5. }
  6. ::-webkit-scrollbar-thumb {
  7. background-color: #12b7f5;
  8. 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);
  9. }
  10. ::-webkit-scrollbar-track {
  11. -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  12. background: #f6f6f6;
  13. }

 文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23323.html

文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23323.html文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23323.html

本文来自网络，本站仅作分享交流，非商业赢利为目的。
如有侵权，请及时联系我们删除！gta-vc@foxmail.com