转载: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. 第07组 Beta版本演示

    组长博客:求戳 队名:摇光 成员 学号 姓名 组长 031702203 容慧珺 杨明哲 031702202 高星 杨明哲 031702307 黄森敏 杨明哲 031702308 朱丽辰 杨明哲 031 ...

  2. 性能测试分析过程(三)linux下查看最消耗CPU/内存的进程

    linux下查看最消耗CPU  内存的进程 1.CPU占用最多的前10个进程:  ps auxw|head -1;ps auxw|sort -rn -k3|head -10  2.内存消耗最多的前10 ...

  3. [转]详解Linux(centos7)下安装OpenSSL安装图文方法

    OpenSSL是一个开源的ssl技术,由于我需要使用php相关功能,需要获取https的文件所以必须安装这个东西了,下面我整理了两种关于OpenSSL安装配置方法. 安装环境:  操作系统:CentO ...

  4. C++基础 (杂七杂八的汇总 )

    继承:继承就是新类从已有类那里得到已有的特性. 类的派生指的是从已有类产生新类的过程.原有的类成为基类或父类,产生的新类称为派生类或子类. 多态:将基类类型的指针或者引用指向派生类型的对象.多态通过虚 ...

  5. delphi连接oracle数据库

    使用ADO套接字连接: conn:= '(DESCRIPTION = '+ '(ADDRESS_LIST = '+ '(ADDRESS = (PROTOCOL = TCP)(HOST = '+host ...

  6. [LeetCode] 170. Two Sum III - Data structure design 两数之和之三 - 数据结构设计

    Design and implement a TwoSum class. It should support the following operations:add and find. add - ...

  7. react前端模版Material-UI.类似于antd/bootstrap

    Material-UI Material-UI是一个实现了Google's Material Design设计规范的react组件库,开箱即用,使用它可以快速搭建出赏心悦目的应用界面. 文档 各种模版 ...

  8. 阿里云k8s部署zookeeper集群

    1. 阿里云k8s创建有状态应用 StatefulSet ,  选择使用模板创建 可以创建自定义模板 apiVersion: apps/v1 kind: StatefulSet metadata: c ...

  9. spring AOP注解实现

    一.什么是AOP 引用一下维基百科的定义 面向切面的程序设计(Aspect-oriented programming,AOP,又译作面向方面的程序设计.剖面导向程序设计)是计算机科学中的一种程序设计思 ...

  10. zookeeper ACL权限

    原文链接:https://www.jianshu.com/p/392248ab27f4 对zookeeper设置ACL属性 我们以zkCli为例,来说明zookeeper对ACL的设置. 使用zkCl ...