用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - css代码库

纯CSS实现滚动条的美化,只兼容谷歌

2013-06-27 作者: 云代码会员举报

[css]代码库

/* 滚动条的宽度 */
 
::-webkit-scrollbar {
 
    width: 14px;
 
    height: 14px;
 
}
 
 
 
 
/*垂直方向的下按钮*/
 
::-webkit-scrollbar-button:vertical:increment {
 
    background:#D6F0FF url(/FronWeb/Images/x1204.png) no-repeat 0px 0px;
 
    height:15px;
 
}
 
 
 
 
/*横向的右边按钮*/
 
::-webkit-scrollbar-button:horizontal:increment {
 
    background:#D6F0FF url(/FronWeb/Images/y1204.png) no-repeat 2px 0px;
 
    width:14px;
 
}
 
 
 
 
/*垂直方向的上按钮*/
 
::-webkit-scrollbar-button:vertical:decrement {
 
    background:#D6F0FF url(/FronWeb/Images/s1204.png) no-repeat 1px -2px;
 
    height:14px;
 
}
 
 
 
 
/*横向的左按钮*/
 
 ::-webkit-scrollbar-button:horizontal:decrement {
 
    background:#D6F0FF url(/FronWeb/Images/z1204.png) no-repeat 1px 0px;
 
    width:14px;
 
}
 
 
 
 
/*滚动槽的颜色 */
 
::-webkit-scrollbar-track-piece {
 
   background-color:#d6f0ff;
 
}
 
 
 
 
/* 滑轮的颜色 */
 
::-webkit-scrollbar-thumb:vertical {
 
    height: 50px;
 
    background-color: #9cdbff;
 
    border:1px solid #7bcfff;
 
    border-radius:10px;
 
    
 
}
 
::-webkit-scrollbar-thumb:horizontal{
 
     height: 50px;
 
    background-color: #9cdbff;
 
    border:1px solid #7bcfff;
 
    border-radius:10px;
 
     }


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...