首页 > Web开发 > 详细

CSS之webkit-scrollbar例子

时间:2016-09-16 18:16:18      阅读:242      评论:0      收藏:0      [点我收藏+]

基于webkit的浏览器现在也可以自定义其样式:

 

 

::-webkit-scrollbar              { /* 1 */  
::-webkit-scrollbar-button       { /* 2 */ }  
::-webkit-scrollbar-track        { /* 3 */  
::-webkit-scrollbar-track-piece  { /* 4 */  
::-webkit-scrollbar-thumb        { /* 5 */  
::-webkit-scrollbar-corner       { /* 6 */  
::-webkit-resizer                { /* 7 */ }  

 

技术分享

::-webkit-scrollbar {

    width: 12px;

}

 

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 

    -webkit-border-radius: 10px;

    border-radius: 10px;

    border:1px solid #666666

}

 

::-webkit-scrollbar-thumb {

    -webkit-border-radius: 10px;

    border-radius: 10px;

    background: rgba(255,0,0,0.8); 

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 

}

::-webkit-scrollbar-thumb:window-inactive {

background: rgba(255,0,0,0.4); 

}

 

 

.test{

width:100px;

height:200px;

overflow:scroll;

border:1px solid #666666;

}

 

<div class="test">kfalsdfjlasjldf</div>

CSS之webkit-scrollbar例子

原文:http://www.cnblogs.com/huangf714/p/5876764.html

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