最新消息: 关于Git&GitHub 版本控制你了解多少?
您现在的位置是:群英 > 开发技术 > web开发 >
css滚动条设置颜色示例分享
PHP中文网发表于 2021-05-19 17:13 次浏览

方法:首先使用“::-webkit-scrollbar-thumb”伪类选择器选中滚动条滑块,然后通过background属性设置滚动条颜色;语法格式“::-webkit-scrollbar-thumb{background:颜色值;}”。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决。

比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的。如图所示:

下面就讲解这几个属性怎么使用,代表什么意思。

webkit下面的CSS设置滚动条的属性

主要有下面7个属性

1、::-webkit-scrollbar 滚动条整体部分,可以设置宽度,颜色啥的

3、::-webkit-scrollbar-button 滚动条两端的按钮

4、::-webkit-scrollbar-track 外层轨道

5、::-webkit-scrollbar-track-piece 内层滚动槽

6、::-webkit-scrollbar-thumb 滚动的滑块

7、::-webkit-scrollbar-corner 边角

8、::-webkit-resizer 定义右下角拖动块的样式

如图所示:

示例:

/*滚动条样式*/
.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/
        width:4px;/*高宽分别对应横竖滚动条的尺寸*/
        height:4px;
}
.cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius:5px;
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        background:rgba(0,0,0,0.2);  /*设置滚动条颜色*/
}
.cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        border-radius:0;
        background:rgba(0,0,0,0.1);
}

(学习视频分享:css视频教程)

以上就是css滚动条颜色怎么设置的详细内容,更多请关注群英网络其它相关文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
相关信息推荐
2021-09-30 16:57:33 关键词:css样式的写法
摘要:css中样式的写法是什么?对一些新手来说,可能不是很了解css中样式的写法,因此本文就给大家来介绍一下CSS的内联样式、内部样式和外部样式的常见写法,有需要的朋友可以参考。..
2021-09-30 16:57:19 关键词:css3阴影效果
摘要:css3如何实现阴影效果?在CSS3中,我们想要实现阴影效果,可以使用box-shadow属性。box-shadow属性的使用也很简单的,但是有些值和问题是需要了解清楚的,下面我们就来详细的了解box-sh..
2021-09-30 16:57:18 关键词:css增加边框
摘要:css如何增加边框?有时候我们需要给元素添加边框的效果,在CSS中,添加边框,我们可以使用border属性,接下来小编就给大家介绍一下border属性的使用、值的介绍和使用要注意的问题,..
2021-09-30 16:57:06 关键词:css对话框
摘要:用css怎么样做一个简单的对话框?对于对话框,大家应该都不陌生,最简单的对话框就是侧面带有一个小三角形的矩形,而实现这样的效果其实并不困难,下面我们就用纯CSS写一个简单..
2021-09-29 19:15:17 关键词:css设置分辨率
摘要:这篇文章主要给大家介绍css设置分辨率的内容,在实际的项目中,因为不同的屏幕尺寸要求的分辨率不同,因此为了不同满足用户需要,我们要设置不用分辨的样式。那么具体怎样做呢..