WordPress中文论坛 - WordPress Chinese Forums

 找回密码
 注册
查看: 1312|回复: 5

三套滚动条样式代码

[复制链接]

36

主题

165

帖子

515

金钱

WP 老手

Rank: 3Rank: 3Rank: 3

积分
680
发表于 2014-7-21 14:55:29 | 显示全部楼层 |阅读模式
本帖最后由 zxc1069 于 2014-7-21 15:01 编辑

样式1(使用方法:直接把下面的代码加到主题里的css样式文件里)

  1. <font size="2">/*---滚动条样式--*/  
  2. ::-webkit-scrollbar{width:10px;height:12px}
  3. ::-webkit-scrollbar-button:vertical{display:none}
  4. ::-webkit-scrollbar-track:vertical{background-color:black}
  5. ::-webkit-scrollbar-track-piece{background:#EAEAEA}
  6. ::-webkit-scrollbar-thumb:vertical{background-color:#8E8E8E;border-radius:6px}
  7. ::-webkit-scrollbar-thumb:vertical:hover{background-color:#E87461}
  8. ::-webkit-scrollbar-corner:vertical{background-color:#535353}
  9. ::-webkit-scrollbar-resizer:vertical{background-color:#FF6E00}</font>
复制代码

样式2(使用方法:直接把下面的代码加到主题里的css样式文件里)

  1. <font size="2">/*---滚动条默认显示样式--*/  
  2. ::-webkit-scrollbar-thumb{  
  3.    background-color:#018EE8;  
  4.    height:50px;  
  5.    outline-offset:-2px;  
  6.    outline:2px solid #fff;  
  7.    -webkit-border-radius:4px;  
  8.    border: 2px solid #fff;  
  9. }  

  10. /*---鼠标点击滚动条显示样式--*/  
  11. ::-webkit-scrollbar-thumb:hover{  
  12.    background-color:#FB4446;  
  13.    height:50px;  
  14.    -webkit-border-radius:4px;  
  15. }  

  16. /*---滚动条大小--*/  
  17. ::-webkit-scrollbar{  
  18.    width:8px;  
  19.    height:8px;  
  20. }  

  21. /*---滚动框背景样式--*/  
  22. ::-webkit-scrollbar-track-piece{  
  23.    background-color:#fff;  
  24.    -webkit-border-radius:0;  
  25. }  </font>
复制代码

样式2(使用方法:直接把下面的代码加到主题里的css样式文件里)

  1. <font size="2">::-webkit-scrollbar { width:10px; margin-right:2px }
  2. ::-webkit-scrollbar-track-piece { background-color:#F5F5F5; border-left:1px solid #D2D2D2; }
  3. ::-webkit-scrollbar-thumb { background:#CBCBCB; width:10px }
  4. ::-webkit-scrollbar-thumb:hover { background:#F07171 }</font>
复制代码





补充内容 (2014-8-16 18:37):
鉴于 http://www.dust-514.org/wordpress/daima/9631.html  转载文章没有加上原文章版权。非常伤心和心酸。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

51

主题

724

帖子

1048

金钱

WP 高手

Rank: 6Rank: 6Rank: 6

积分
1772
发表于 2014-7-24 01:29:30 | 显示全部楼层
能不加就不加 影响速度啊。
[url=http://www.hang.cc][b]www.hang.cc[/b][/url]

36

主题

165

帖子

515

金钱

WP 老手

Rank: 3Rank: 3Rank: 3

积分
680
 楼主| 发表于 2014-7-24 16:00:07 | 显示全部楼层
hhist 发表于 2014-7-24 01:29
能不加就不加 影响速度啊。

就这么点代码,还影响速度?主题里面的css代码还要比这几段代码多上多少倍,还不是照样速度进,加这一点代码算什么,就像是给池塘加滴水。

1

主题

8

帖子

20

金钱

WP 熟手

Rank: 2Rank: 2

积分
62
发表于 2014-8-7 23:20:43 | 显示全部楼层
-webkit-。 火狐和IE下就不行了啊。。

0

主题

5

帖子

20

金钱

WP 熟手

Rank: 2Rank: 2

积分
43
发表于 2014-8-8 09:43:06 | 显示全部楼层
学习学习 谢谢分享
您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|手机版|小黑屋|联系我们|WordPress中文论坛 - CNWP ( 闽ICP备12016335号-11 )

GMT+8, 2019-6-19 00:35 , Processed in 0.106416 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表