您的位置：首页 > Web前端 > CSS

自定义 Chrome 滚动条的样式

2012-10-25 13:14 351 查看
用任何一款文字编辑器打开之，加入以下代码：

view source

print?

01::-webkit-scrollbar-track-piece{
02background-color:#fff;/*滚动条的背景颜色*/
03-webkit-border-radius:0;/*滚动条的圆角宽度*/
04}
05::-webkit-scrollbar{
06width:8px;/*滚动条的宽度*/
07height:8px;/*滚动条的高度*/
08}
09::-webkit-scrollbar-thumb:vertical{/*垂直滚动条的样式*/
10height:50px;
11background-color:#999;
12-webkit-border-radius:4px;
13outline:2px solid #fff;
14outline-offset:-2px;
15border: 2px solid #fff;
16}
17::-webkit-scrollbar-thumb:hover{/*滚动条的hover样式*/
18height:50px;
19background-color:#9f9f9f;
20-webkit-border-radius:4px;
21}
22::-webkit-scrollbar-thumb:horizontal{/*水平滚动条的样式*/
23width: 5px;
24background-color: #CCCCCC;
25-webkit-border-radius: 6px;
26}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航