首页 > Web开发 > 详细

CSS美化谷歌浏览器滚动条样式

时间:2017-03-07 23:19:42      阅读:413      评论:0      收藏:0      [点我收藏+]
/*滚动条 start*/  
::-webkit-scrollbar {  
width: 7px;  
height: 4px;  
background-color: #F5F5F5;  
}  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track {  
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
background: #fff ;  
}  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb {  
border-radius: 3px;  
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
background-color:rgba(158, 158, 158, 0.7);  
}  
::-webkit-scrollbar-thumb:hover {  
border-radius: 3px;  
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
background-color:rgba(158, 158, 158, 1);  
}

下面是展示效果

技术分享

本文出自 “刘振” 博客,请务必保留此出处http://liuzhenlife.blog.51cto.com/10591893/1904061

CSS美化谷歌浏览器滚动条样式

原文:http://liuzhenlife.blog.51cto.com/10591893/1904061

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!