网站滚动条彩色美化代码分享

当网页内容过多时，就会出现滚动条，浏览器一般默认都是灰色的不太好看，所以今天分享的代码就是美化浏览器默认的滚动条颜色。具体效果参考本站侧边栏，

wordpress具体使用：

方式1，在后台菜单选择外观 -> 自定义 -> 额外css中,将下方美化的代码放入即可,

方式2：修改主题源码

找到网站主题模板目录中的header.php文件，将下方css美化样式的代码添加在网页的head头部位置中添加样式代码, （需要带Style样式标签,）或网页中其它适位置中均可，本地网页美化同理。

一般不推荐修改源码，使用方式1即可。

代码如下：

/**彩色滚动条样式开始*/
/*by：大雄搜集站-soujiz.com*/
  ::-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;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 1px;
  }
/**彩色滚动条样式开始*/
/*by：大雄搜集站-soujiz.com*/
/**彩色滚动条样式开始*/
/*by：大雄搜集站-soujiz.com*/
  ::-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;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 1px;
  }
/**彩色滚动条样式开始*/
/*by：大雄搜集站-soujiz.com*/
/**彩色滚动条样式开始*/
/*by：大雄搜集站-soujiz.com*/
  ::-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;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 1px;
  }
/**彩色滚动条样式开始*/
/*by：大雄搜集站-soujiz.com*/