转载:https://www.cnblogs.com/yclblog/p/6806496.html

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 10px; /*滚动条宽度*/
height: 16px; /*滚动条高度*/
} /*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px; /*滚动条的背景区域的圆角*/
background-color: transparent; /*滚动条的背景颜色*/
} /*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px; /*滚动条的圆角*/
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #8fa4bd; /*滚动条的背景颜色*/
}

html 滚动条样式的更多相关文章

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

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

  2. HTML div 滚动条样式设计

    ::-webkit-scrollbar-track-piece{ background-color:#fff;/*滚动条的背景颜色*/ -webkit-border-radius:0;/*滚动条的圆角 ...

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

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

  4. jquery两个滚动条样式

    jquery两个滚动条样式 点击下载

  5. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  6. 在css中定义滚动条样式

    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...

  7. HTML ---滚动条样式代码及<marquee>标签的用法;

    html中滚动条属性设置 scrollbar属性.样式详解 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)    overflow-x水平方向内容溢出时的设置    overfl ...

  8. duilib让不同的容器使用不同的滚动条样式

    装载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42240569 以前在给一个容器设置横纵向的滚动条时,一直是通过设置xml ...

  9. 自设chrome默认滚动条样式

    今天无聊,想着chrome这种全面使用html的浏览器,可不可以让我自行改变它的默认CSS呢,结果去查查,有,很好 win7/8目录为 C:\Users\[你的用户名]\AppData\Local\G ...

  10. WPF 自定义滚动条样式

    先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...

随机推荐

  1. 第06组 Alpha冲刺(1/4)

    队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11863075.html 作业博客 :https://edu.cnblogs.com/campus/f ...

  2. javassist使用全解析

    Java 字节码以二进制的形式存储在 .class 文件中,每一个 .class 文件包含一个 Java 类或接口.Javaassist 就是一个用来 处理 Java 字节码的类库.它可以在一个已经编 ...

  3. Oracle系列十 创建和管理表

    常见的数据库对象 Oracle 数据库中的表 用户定义的表: 用户自己创建并维护的一组表 包含了用户所需的信息 如:SELECT * FROM user_tables;查看用户创建的表 数据字典: 由 ...

  4. Laravel 使用自己的类库三种方式

    虽然Composer使得我们可以重用很多现有的类库(例如packagist.org中的),但是我们仍然可能用到一些不兼容composer的包或者类库.另外在某一项目中,我们也可能会创建某一类库,而且可 ...

  5. 转 perl DBI 总结

    https://www.cnblogs.com/homezzm/archive/2011/07/22/2113618.html ##查看已经安装的包 #!/usr/bin/perluse strict ...

  6. 两种Redis持久化原理的详解

    Redis为持久化提供了两种方式: RDB:在指定的时间间隔能对你的数据进行快照存储. AOF:记录每次对服务器写的操作,当服务器重启的时候会重新执行这些命令来恢复原始的数据. 本文将通过下面内容的介 ...

  7. [转]使用apt安装nodejs10

    使用apt安装nodejs10 链接地址:https://blog.csdn.net/sunhaobo1996/article/details/80340513

  8. [LeetCode] 66. Plus One 加一

    Given a non-empty array of digits representing a non-negative integer, plus one to the integer. The ...

  9. [LeetCode] 106. Construct Binary Tree from Inorder and Postorder Traversal 由中序和后序遍历建立二叉树

    Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  10. win10查看激活到期时间

    我们知道Windows系统需要激活后才可以使用全部功能,那么你的Windows10激活了吗?如何查看激活时间呢?是不是永久激活的?带着这些问题,下面我们就一个一个逐一查看一下吧. 工具/原料   Wi ...