css3 自定义滚动条样式
::-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 自定义滚动条样式的更多相关文章
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- CSS3自定义滚动条样式 -webkit-scrollbar(转)
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS3自定义滚动条样式 -webkit-scrollbar
今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...
- CSS3自定义滚动条样式 之 -webkit-scrollbar
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS3自定义滚动条样式 -webkit-scrollbar (一)
Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scroll ...
- 滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)
有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼 ...
- CSS3自定义滚动条样式-webkit内核
自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...
- CSS3自定义滚动条样式方法
该代码收集于网上资源,非原创 /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: ...
- css3美化滚动条样式
1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...
随机推荐
- 三、文件IO——系统调用(续)
3.2.4 read 函数--- 读文件 read(由已打开的文件读取数据) #include<unistd.h> ssize_t read(int fd, void * buf, siz ...
- Kali Linux之常见后门工具介绍
1.Meterpreter 它是Metasploit框架中功能强大的后渗透模块.可以通过Meterpreter的客户端执行攻击脚本,远程调用目标主机上运行的Meterpreter服务端. 命令 作用 ...
- a*寻路分析
http://dev.gameres.com/Program/Abstract/Arithmetic/A%20Pathfinding%20for%20Beginners.htm 定义: 绿色节点为A ...
- vue父组件如何调用子组件的属性或方法
常常我们需要组件的拆分,就涉及到父子调用的关系,那么父组件如何调用子组件的属性和方法呢? 子组件child <template> <div> {{msg}} </div& ...
- Spring+thymeleaf
1.导入jar包 2.配置 3.标签使用 th:text th:utext th:object th:if th:switch th:case th:each="person:userlis ...
- Leetcode#832. Flipping an Image(翻转图像)
题目描述 给定一个二进制矩阵 A,我们想先水平翻转图像,然后反转图像并返回结果. 水平翻转图片就是将图片的每一行都进行翻转,即逆序.例如,水平翻转 [1, 1, 0] 的结果是 [0, 1, 1]. ...
- linux学习记录.6.vscode调试c makefile
参考 https://www.cnblogs.com/lidabo/p/5888997.html task有更新,不能使用文章的代码. 多文件 终端 touch main.c hw.c hw.h vs ...
- 课程9:《hibernate框架开发2016版视频》视频目录
\第1天\视频\01_今天内容介绍.avi; \第1天\视频\02_web内容回顾.avi; \第1天\视频\03_hibernate框架概述.avi; \第1天\视频\04_什么是orm思想.avi ...
- python - 语言介绍
python 程序的执行过程 python 的实现 Cpython 原始.标准的实现方式 Jython 用于与Java语言继承的实现 Ironpython 用于与.net框架继承的实现 python ...
- shell编程 之 ssh远程连接
1,ssh理解 有两个服务器,一个是本地,一个是云端的,都是linux系统的,如果我们想要通过本地访问云端的系统,那我们可以用ssh命令,可以实现本地登入远程连接,上传或者下载文件到远程服务器. ss ...