::-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修改主机名,关闭图形化界面,绑定ip地址,修改ip地址

    1关闭图形化界面 vi /etc/inittab 改成id:3:initdefault: 注意:不要选0或6 2.修改主机名 vi /etc/sysconfig/network 修改即可 3,修改ip ...

  2. Idea运行web项目时,提示java.lang.ClassNotFoundException: com.mysql.jdbc.Driver解决方法

    今天用 idea写了个工程.结果最后报错,错误信息如下: java.lang.ClassNotFoundException: com.mysql.jdbc.Driverat org.apache.ca ...

  3. mysql字符函数

    1.CONCAT()  字符连接 (1)mysql> SELECT CONCAT('imooc', 'MYSQL');+--------------------------+| CONCAT(' ...

  4. sql -leetcode 178. Rank Scores

    Score 很好得到: select Score from Scores order by Score desc; 要得到rank, 可以通过比较比当前Score 大的Score 的个数得到: sel ...

  5. ThinkPHP5.0.21&5.1.* 代码执行和命令执行漏洞利用

    ThinkPHP5.0.21&5.1.* 代码执行和命令执行漏洞利用 ThinkPHP5.0.21&5.1.*  exploit code execution and command ...

  6. Array.apply(null,{length:6}).map()

    map定义和方法 map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值. map()方法按照原始数组元素顺序依次处理元素. 注意: map不会对空数组进行检测 map不会改变原始 ...

  7. CDH安装报错 Monitor-HostMonitor throttling_logger ERROR ntpq: ntpq -np: not synchronized to any server

    1 没有安装ntp同步服务 所有机器统一时区,确认所有机器配置一致  vim /etc/sysconfig/clock ntp服务器配置 ln -sf /usr/share/zoneinfo/Asia ...

  8. 2017-2018-2 165X 『Java程序设计』课程 团队项目备选题目

    2017-2018-2 165X 『Java程序设计』课程 团队项目备选题目 结合本课程时间安排,以及同学们的专业和课程内容,制定了以下六个题目供各小组选择.如有其他项目方案设想,可自行与老师沟通.老 ...

  9. 关于cmd命令

    F: 直接进入F盘 cd\ 进入当前盘的根目录 md 文件名 创建文件名 cd 文件名 进入文件名 rd  文件名  删除文件夹

  10. 【Java编程思想笔记】-集合1

    1.为什么要用集合? 一般情况下,数组是保存一组对象(或基本数据类型)最有效的方式.但是数组有着固定的尺寸,而在更一般的情况下,我们在写程序时不知道将需要保存多少个对象,或者是否需要更复杂的存储结构来 ...