转载:https://www.cnblogs.com/yclblog/p/6806496.html

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 10px; /*滚动条宽度*/
height: 16px; /*滚动条高度*/
} /*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px; /*滚动条的背景区域的圆角*/
background-color: transparent; /*滚动条的背景颜色*/
} /*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px; /*滚动条的圆角*/
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #8fa4bd; /*滚动条的背景颜色*/
}

html 滚动条样式的更多相关文章

  1. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  2. HTML div 滚动条样式设计

    ::-webkit-scrollbar-track-piece{ background-color:#fff;/*滚动条的背景颜色*/ -webkit-border-radius:0;/*滚动条的圆角 ...

  3. CSS3自定义滚动条样式 -webkit-scrollbar

    今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...

  4. jquery两个滚动条样式

    jquery两个滚动条样式 点击下载

  5. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  6. 在css中定义滚动条样式

    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...

  7. HTML ---滚动条样式代码及<marquee>标签的用法;

    html中滚动条属性设置 scrollbar属性.样式详解 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)    overflow-x水平方向内容溢出时的设置    overfl ...

  8. duilib让不同的容器使用不同的滚动条样式

    装载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42240569 以前在给一个容器设置横纵向的滚动条时,一直是通过设置xml ...

  9. 自设chrome默认滚动条样式

    今天无聊,想着chrome这种全面使用html的浏览器,可不可以让我自行改变它的默认CSS呢,结果去查查,有,很好 win7/8目录为 C:\Users\[你的用户名]\AppData\Local\G ...

  10. WPF 自定义滚动条样式

    先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...

随机推荐

  1. MacBook Air在macOS Mojave和macOS Seirra系统下使用Loopback在OBS Studio推流时输出系统软件声音

    转载请标注原地址:https://www.cnblogs.com/lixiaojing/p/11440533.html 运行环境: Loopback破解版获取: https://pan.baidu.c ...

  2. 【Django】Django项目结构与单元测试

    学校的软工项目要开发一个网站,自然的想到用python+Django来做.由于之前没有用Django开发过大型的网站项目,所以遇到了一些问题.记录在此,便于以后查阅. 今天完成了项目结构的设计.部分的 ...

  3. a标签伪类选择器+过度模块

    a标签的伪类选择器 1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的. 2.格式: 1):link 修改从未被访问过状态下的样式. 2):visited 修改被访问 ...

  4. 【软工实践】Beta版本演示

    团队信息 队名:女生都队 组长博客: 博客链接 成员 学号 史恩泽(组长) 031702122 施金海 031702121 阮君曦 031702116 陈银山 031702137 李季城 031702 ...

  5. python 文件夹下的图片转PDF

    from PIL import Image import os def rea(path, pdf_name): file_list = os.listdir(path) pic_name = [] ...

  6. 动态BGP与静态BGP

    在阿里云上选择ECS的时候,发现有动态BGP和静态BGP区分,静态的要便宜些,搜了下区别如下: 静态BGP路由是指由网络运营商手动配置的路由信息.当网络的拓扑结构或链路的状态发生变化时,运营商需要手动 ...

  7. FFMPEG Tips 如何提取码流的基本信息

    原文连接: https://zhuanlan.zhihu.com/p/23448271 1. 码流中的哪些信息值得关注 ? [ ] 是否包含:音频.视频 [ ] 码流的封装格式 [ ] 视频的编码格式 ...

  8. python2中的unicode()函数在python3中会报错:

    python2中的unicode()函数在python3中会报错:NameError: name 'unicode' is not defined There is no such name in P ...

  9. nvm安装、解决nvm command not found问题、卸载

    安装 nvm是node的包版本管理工具,github地址如下:nvm 安装命令 1 curl -o- https://raw.githubusercontent.com/creationix/nvm/ ...

  10. sonar:默认的扫描规则

    https://blog.csdn.net/liumiaocn/article/details/83550309 https://note.youdao.com/ynoteshare1/index.h ...