::-webkit-scrollbar :滚动条整体部分

::-webkit-scrollbar-thumb :滚动条里面的小方块样式

::-webkit-scrollbar-track 滚动条的轨道

::-webkit-scrollbar-button 滚动条轨道两端的小按钮,允许通过点击微调小方块的位置

::-webkit-scrollbar-track-piece 内层轨道,

::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处

::-webkit-resizer 两个滚动条交汇处上用于通过拖动调整元素大小的小控价

/* Let's get this party started */
::-webkit-scrollbar {
width: 5px;
} /* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 5px;
border-radius: 21px;
} /* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius:5px;
border-radius: -9px;
background: #2f732f;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #6a9a6d;
}

  

css3 自定义滚动条样式的更多相关文章

  1. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

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

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

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

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

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

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

  5. CSS3自定义滚动条样式 -webkit-scrollbar (一)

    Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scroll ...

  6. 滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)

    有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼 ...

  7. CSS3自定义滚动条样式-webkit内核

    自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...

  8. CSS3自定义滚动条样式方法

    该代码收集于网上资源,非原创 /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: ...

  9. css3美化滚动条样式

    1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...

随机推荐

  1. 三十、Linux 进程与信号——信号的概念及 signal 函数

    30.1 信号的基本概念 信号(signal)机制是Linux 系统中最为古老的进程之间的通信机制,解决进程在正常运行过程中被中断的问题,导致进程的处理流程会发生变化 信号是软件中断 信号是异步事件 ...

  2. windows 检测进程pid

    根据端口查进程: netstat -ano |find " netstat -ano | findstr 2018 a 显示所有连接和侦听的端口n 以数字形式显示地址和端口号o 显示关联的进 ...

  3. [C++]最小生成元 (Digit Generator, ACM/ICPC Seoul 2005, UVa1583)

    Question 例题3-5 最小生成元 (Digit Generator, ACM/ICPC Seoul 2005, UVa1583) 如果x+x的各个数字之和得到y,就是说x是y的生成元.给出n( ...

  4. okhttp3与旧版本okhttp的区别分析

    https://www.jianshu.com/p/4a8c94b239b4  待总结学习

  5. ARM核心板_迅为4412核心板_核心板中的小新潮

    iTOP-4412核心板是迅为电子推出的一款高端四核核心板,配备三星Exynos 4412四核处理器,主频为1.4GHz,内置8GB存储空间. 该板设计小巧.配备三星自家电源管理芯片,具有9路DC/D ...

  6. C++ operator(重载操作符) 【转】

    转自:http://www.cnblogs.com/xiangxiaodong/archive/2012/02/12/2348144.html operator是C++的关键字,它和运算符一起使用,表 ...

  7. scrapy基础 之 xpath网页结构

    1 ,什么是xpath XPath 是一门在 XML 文档中查找信息的语言.XML是一种类似于HTML的传输协议 2,节点 XPath 中,有七种类型的节点:元素.属性.文本.命名空间.处理指令.注释 ...

  8. 为Oracle GoldenGate准备数据库

    了解如何为Oracle GoldenGate准备数据库,包括如何配置连接和日志记录,如何在数据库中启用Oracle GoldenGate,如何设置闪回查询以及如何管理服务器资源. 为集成进程配置连接 ...

  9. Python3-递归函数

    什么是递归? 递归,就是函数在运行的过程中调用自己. 代码示例 def recursion(n): print(n) recursion(n+) recursion() 出现的效果就是,这个函数在不断 ...

  10. C# 读取驱动器盘符及信息

    System.IO.DriveInfo[] hardDiskDrives = System.IO.DriveInfo.GetDrives(); foreach (System.IO.DriveInfo ...