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

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

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

wordpress具体使用:

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

方式2:修改主题源码

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

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

代码如下:

 /***********滚动条彩色样式 **********/
  ::-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;
  }
© 版权声明
THE END
喜欢点个赞支持一下吧
点赞0赏币
分享
评论交流 抢沙发

请登录后发表评论