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; } : ...
随机推荐
- systemctl命令详解
一.查询服务是否开机启动 systemctl is-enabled xxx.service 二.开机运行服务 systemctl enable xxx.service 三.取消开机运行 s ...
- jsp快速开始
[greeting.jsp] <%@ page contentType="text/html;charset=UTF-8" language="java" ...
- 新闻类App顶部菜单栏封装
概述 最近有一个需求,类似今日头条顶部的菜单栏.唯一区别是需要带可移动的下划线.网上查找资料,发现解决方案大部分是用UIScrollView实现.下方VC控制用UICollectionView.这样可 ...
- kindeditor<=4.1.5 文件上传漏洞利用
kindeditor<=4.1.5 文件上传漏洞 - Kindeditor <=4.1.5 file upload vulnerability and use 漏洞存影响版本:小于等于4. ...
- nth-of-type(n)
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. p:nth-of-type(2) { background:#ff0000; } 规定属于其父元素的第二个 ...
- Chrome及Firefox插件
注:以下所有工具都是笔者自己目前使用的 密码管理工具 lastpass 护眼工具 眼睛护航 待续……
- Tomcat7基于redis的session共享
一,项目需求 因开发人员在登录后台时需要反复认证,tomcat反复切换,所以给运维组提出需求,解决session共享问题. 二,解决方法 环境:基于Centos6.8 Jdk 版本 java ve ...
- python笔记(一)获取当前目录路径和文件
一.获取当前路径 1.使用sys.argv[0] import sys print sys.argv[0]#输出#本地路径 2.os模块 import os print os.getcwd() #获取 ...
- Linux C++ TCP Socket通信实例
环境:Linux 语言:C++ 通信方式:TCP 下面用TCP协议编写一个简单的服务器.客户端,其中服务器端一直监听本机的6666号端口.如果收到连接请求,将接收请求并接收客户端发来的消息:客户端与服 ...
- Eclipse打印GC日志
一.生成gc.log 第一步:右键项目或文件——Run As——Run Configurations. 第二步:点击Arguments,在VM arguments中填写-Xloggc:F:/gc.lo ...