分享久伴博客浏览器滚动条样式

久伴
久伴
久伴
643
文章
535
评论
2019年2月15日01:21:47 8 1,122 485字阅读1分37秒

分享一个比较炫酷的浏览器滚动条样式,喜欢自带的可以路过~~,效果图见久伴博客右侧浏览器滚动条,,喜欢简洁的可以看这篇文章https://jiubx.com/2050.html

css代码

::-webkit-resizer {
    border-radius: .3125rem;
    background-color: #2f4056;
}

::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
}
::-webkit-scrollbar-thumb {
    border-radius: .5rem;
    background-color: #0073aa;
    background-image: -webkit-linear-gradient(45deg,hsla(0,0%,100%,.4) 25%,transparent 25%,transparent 50%,hsla(0,0%,100%,.4) 50%,hsla(0,0%,100%,.4) 75%,transparent 75%,transparent);
}

使用方法

复制以上代码粘贴到你的css里面

久伴
响应式打赏界面-适合博客打赏界面 前端作品

响应式打赏界面-适合博客打赏界面

这个界面采用bootstrap框架编写,是久伴在学习bootstrap的时候写的一个demo,后续会把打赏名单做成滚动式的,替代表单,或者做滚动监听,表格内部做滚动 在线预览 小哥哥小姐姐觉得博客不错...
CSS自定义浏览器滚动条样式 HTML+CSS

CSS自定义浏览器滚动条样式

前言最近在使用Chrome浏览器访问QQ会员的官网时候发现网站的浏览器默认侧边滚动栏变成了如下图所示的样式,后来上网去查询了一下,然后得知该样式是可以通过CSS来设计的,于是就是自己捣鼓了一下。 该样...
分享一下前端table表格自适应方案 HTML+CSS

分享一下前端table表格自适应方案

现在前端框架满天飞,bootstrap,mdui,meiziUI,element等等框架,使用框架自带的table类基本三二分钟就搞定一个自适应的table表格,但是实现的方案,大家了解吗 久伴在一次...
匿名

发表评论

匿名网友 填写信息

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

评论:8   其中:访客  5   博主  3
    • 小白羊¨ш 小白羊¨ш 0

      这个站的模版模块设计很好看!

      • 刘晨晨 刘晨晨 2

        你的是豹纹,我是小清新渐变条

          • 久伴 久伴

            @ 刘晨晨 豹纹 :wink: 你的滚动条多了一个边框,效果的确比我的好,有时间参考一下你的渐变

          • 弥雅尔尔 弥雅尔尔 4

            蛮好看的!似乎你的站变化好多地方的 感觉!

              • 久伴 久伴

                @ 弥雅尔尔 嘿嘿,不想换主题,但是看久了视觉疲劳,就DIY了一波 :grin:

              • 响石潭 响石潭 3

                哈哈哈,漂亮拉风的滚动条