给网站添加侧边彩色滚动条
文章最后更新时间:2022年11月24日
网站默认的浏览器侧边栏滚动条是非常丑陋的,当然,有些主题是自带美化的侧边滚动栏不需要我们自己去美化,有些主题是没有美化侧边滚动栏的,那么这时就需要我们去美化啦!
单色滚动条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; }
文章作者:队长不在家
文章版权:除非注明,否则均为博客屋原创文章,转载或复制请以超链接形式并注明出处。
文章版权:除非注明,否则均为博客屋原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...