知更鸟(begin)美化修改滚动条样式

如梦,浮尘
89
文章
16
评论
2019年2月24日13:11:22 评论 638字阅读2分7秒
摘要

wordpress美化代码,针对知更鸟主题。

说明

该代码只针对知更鸟(begin)主题,其它主题需要自行修改添加到相应主题的style.css文件。

相应代码

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width: 9px;
    height: 9px
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #0093ff;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

效果预览

知更鸟(begin)美化修改滚动条样式

滚动条代码效果示意图

  • 版权声明

  • 本文仅用于学习、研究和交流目的,转载请注明原文地址:https://www.winmx.cn/347.html
    • ● 文章内容仅供参考,所涉及的软件及内容以具体使用情况为准!
    • ● 本文(包括但不仅限于文字、图片、图表)的作品仅供参考使用,并不代表本网站同意其说法或描述,仅为提供更多信息,也不构成任何投资建议。对于访问者根据本网站提供的信息所做出的一切行为,除非另有明确的书面承诺文件,否则本网站不承担任何形式的责任。
    • ● 本文是利用读书、参考、引用、构思、复制和粘贴等多种方式打造成的文章,由于水平有限,不足和错误之处在所难免,希望大家能够批评指出。
    • ● 文章内容部分来源于互联网,不代表本人的任何立场;涉及软件来源于互联网,仅供个人下载使用,请勿用于商业用途,版权归软件开发者所有,下载后请于 24 小时内删除。如有真实需要请支持正版!因下载本站任何资源造成的损失,全部责任由使用者本人承担!
    • ● 如果你是版权方,认为本文内容对您的权益有所侵犯,请联系本站提交相应的证明材料,若情况属实将在 72h 内将本文删除或修正。
    • ● 更多相关内容请查看『免责声明』。
冰凝梦想公众号
匿名

发表评论

匿名网友 填写信息

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