纯代码美化浏览器右侧滚动条 —— WordPress美化

爱资源网 WordPress美化评论55阅读模式

在浏览网页时我们可以看到右侧的滚动条,一般的默认样式着实不太好看,可以依据一些CSS样式来进行一下美化。

纯代码美化浏览器右侧滚动条 —— WordPress美化

 

代码部署

一般主题都会自带 自定义代码 这样主题设置的,只需在主题设置自定义CSS代码里面添加美化的css代码就即可美化啦!

如果主题没有 自定义代码 那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外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;  
}

 

彩色滚动条(一)

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

 

彩色滚动条(二)

/**====滚动条样式====*/
::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
height: 8px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
background-color: #12b7f5;
background-image: -webkit-linear-gradient(45deg, rgba(235,133,69,1) 25%, transparent 25%, transparent 50%, rgba(235,133,69,1) 50%, rgba(235,133,69,1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #f6f6f6;
}

 

效果见本站右侧

 

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!欢迎打赏!

  • 版权声明 1、本网站名称:爱资源网
    本站永久网址:https://www.izywang.com
    2、如果您喜欢本站,点击这儿 不花一分钱捐赠本站

    这些信息可能会帮助到你: 下载帮助 | 报毒说明 | 进站必看

    3、本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
    附:二00二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
    4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
    6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

  • 转载请务必保留本文链接:纯代码美化浏览器右侧滚动条 —— WordPress美化https://www.izywang.com/318.html

评论  0  访客  0
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: