css改变滚动条样式


当前第2页 返回上一页

CSS也很简单,例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

/* 设置滚动条的样式 */

::-webkit-scrollbar {

width:12px;

}

/* 滚动槽 */

::-webkit-scrollbar-track {

-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);

border-radius:10px;

}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {

border-radius:10px;

background:rgba(0,0,0,0.1);

-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);

}

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

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

}

【推荐学习:css视频教程】

二、IE下面的CSS设置滚动条

IE下面就比较简单那了,自定义的项目比较少,全是颜色。

  • scrollbar-arrow-color: color; /三角箭头的颜色/
  • scrollbar-face-color: color; /立体滚动条的颜色(包括箭头部分的背景色)/
  • scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/
  • scrollbar-highlight-color: color; /滚动条的高亮颜色(左阴影?)/
  • scrollbar-shadow-color: color; /立体滚动条阴影的颜色/
  • scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/
  • scrollbar-track-color: color; /立体滚动条背景颜色/
  • scrollbar-base-color:color; /滚动条的基色/

以上就是css改变滚动条样式的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

css怎么设置居中对齐

一招搞定css不规则边框

jquery怎么取消css样式

如何清理无用的css样式,你知道吗?

css的引入方式有哪些

css clear属性怎么用

5款实用css 3d特效,让你的页面更惊艳!

css怎么调整行距

css怎么设置最大宽度

css怎么给图片添加两个边框

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...