::-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. jsp 起航 和Servlet通过attribute通信

    @WebServlet(name = "ticketServlet",urlPatterns = {"/tickets"},loadOnStartup = 1) ...

  2. Java基础_0205: 程序逻辑结构

    使用if语句进行判断 public class TestDemo { public static void main(String args[]) { double score = 90.0; // ...

  3. 对Tomcat部署web应用的方式总结

    对Tomcat部署web应用的方式总结,常见的有以下四种: 1.[使用控制台部署] 访问Http://localhost:8080,并通过Tomcat Manager登录,进入部署界面即可. 2.[利 ...

  4. IIS7配置Gzip压缩

    II7中自带了gzip功能,理论上应该比ii6配置起来应该简单一点,但是容易出的问题比较多.有的II7配置web服务器角色的时候可能没有安装启用动态内容压缩,所以这个钩子是灰色的,需要再次安装. 如图 ...

  5. Angular4

    1.安装node.js 官网下载安装 npm会跟着被自动安装 2.安装Angular工具(AngularCli) 1.使用npm安装 npm install -g @angular/cli 2使用cn ...

  6. [PDFBox]后台操作pdf的工具类

    PDFBox是Apache下的一个操作pdf的类库.其也提供了一个命令行的工具,也提供了java调用的第三方类库. 下载地址:https://pdfbox.apache.org/ 下面的实验基于JDK ...

  7. android SeekBar设置背景无法被填充满的bug

    在做一个播放进度的时候,用到了SeekBar,调用布局如下: <SeekBar android:id="@+id/example_audio_bar" android:lay ...

  8. (ScrollViewer或者有滚动条的控件)嵌套一个(ScrollViewer或者有滚动条的控件)禁用里面的滚动条

    转自:http://blog.csdn.net/haylhf/article/details/8351203 后有改动 在C# 中,两个ScrollViewer嵌套在一起或者ScrollViewer里 ...

  9. costmap_2d 解析

    costmap_2d这个包提供了一种2D代价地图的实现方案,该方案利用输入的传感器数据,构建数据2D或者3D代价地图(取决于是否使用基于voxel的实现),并根据占用网格和用户定义的膨胀半径计算2D代 ...

  10. go 单引号,双引号,反引号区别

    go里面双引号是字符串,单引号是字符,不存在单引号字符串. 但有反引号字符串,就是esc键下面1键左边tab键上面那个键,区别是反引号字符串允许换行符