当前位置: 移动技术网 > IT编程>网页制作>CSS > 纯CSS改变webkit内核浏览器的滚动条样式

纯CSS改变webkit内核浏览器的滚动条样式

2019年07月25日  | 移动技术网IT编程  | 我要评论
这篇文章主要介绍了纯CSS改变webkit内核浏览器的滚动条样式,需要的朋友可以参考下... 14-04-17

基于webkit的浏览器现在可以自定义其滚动条的样式了,实现代码如下:


复制代码
代码如下:

::-webkit-scrollbar/*整体部分*/
{
width: 10px;
height:10px;
}

::-webkit-scrollbar-track/*滑动轨道*/
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0px;
background: rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb/*滑块*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover/*滑块效果*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}

效果:

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网