当前日期时间
当前时间:
网站标志
Logo
全站搜索
广告位
phpweb图片广告
广告位
phpweb图片广告
自定内容

phpweb已经是国内最强的的开源电子商务系统了,但并非完美,因为任何...

互联网3年一轮回,京东凡客等电商品牌在三年之前也不过是小打小闹,而如...

电商已经成为趋势,传统行业的竞争已经逐渐演变到网络上,也有不少用Weboss...

phpweb系统是固定的模式,适用于大部分行业与需求。但有一些行业还是有自己...

当前位置
文章正文

美化WordPress网站侧边滚动条

发表:管理员  发表时间:2021-07-12 09:58:27   阅读:(455)次  

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;

}

 

假如我们资讯/文章对您有所帮助,您可以通过扫描捐赠二维码支持一下我们~

感谢您对我们的支持,您的小小支持让我们有信心走得更远!

脚注信息
© 2005-2015 草莓互联(100cm.cn) 广州同福信息科技有限公司 版权所有,并保留所有权利。

广州市东莞庄一横路116号 粤ICP备11046216号

经营性网站备案信息 广州网络警察报警平台 不良信息举报中心  百度信誉档案 广州工商红盾网 可信网站认证