当网页内容过多时,就会出现滚动条,浏览器一般默认都是灰色的不太好看,所以今天分享的代码就是美化浏览器默认的滚动条颜色。具体效果参考本站侧边栏,
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*/
© 版权声明
THE END
暂无评论内容