WordPress网站侧边滚动条美化

介绍

WordPress默认浏览器侧边栏滚动条有点丑,当然,个别WordPress主题是自带美化的侧边滚动栏无需我们自己美化,有些WordPress主题是没有美化侧边滚动栏,没有怎么办呢,我们自己美化!站长就教大家自定义美化侧边滚动栏。非常简单,一句代码的事情就可以完成自定义美化WordPress侧边滚动栏,代码适用于绝大多数WordPress主题,并且该美化方案也适用于代码高亮的滚动条。

教程开始

一般主题都会自带自定义代码这样主题设置的,只需在主题设置自定义CSS代码里面添加美化的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;   }

彩色的滚动条css代码

/**彩色滚动条样式*/ ::-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; }


相关文章

您需要 登录账户 后才能发表评论

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注