该代码收集于网上资源,非原创

  /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 10px;
/*对垂直流动条有效*/
height: 10px;
/*对水平流动条有效*/
} /*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: rosybrown;
border-radius: 3px;
} /*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
border-radius: 7px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #da4744;
} /*定义两端按钮的样式*/
::-webkit-scrollbar-button {
background-color: #da4744;
} /*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
background: da4744;
} ::-webkit-scrollbar-track-piece {
background-color: #e64747;
}

  

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浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼 ...

  6. CSS3自定义滚动条样式 -webkit-scrollbar (一)

    Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scroll ...

  7. CSS3自定义滚动条样式-webkit内核

    自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...

  8. css3 自定义滚动条样式

    ::-webkit-scrollbar :滚动条整体部分 ::-webkit-scrollbar-thumb :滚动条里面的小方块样式 ::-webkit-scrollbar-track 滚动条的轨道 ...

  9. css3美化滚动条样式

    1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...

随机推荐

  1. 导出 VuePress构建的网站为 PDF

    前言 学 Rust 也有一段时间了,网上也有不少官方文档的中文翻译版,但是似乎只有 Rust中文网站 文档一直是最新的,奈何并没有 PDF 供直接下载,是在是不太方便,为了方便阅读以及方便后续文档更新 ...

  2. Tips for TMUX

    常用命令 tmux ls # 显示后台session列表 tmux new -t [name] # 新建session tmux a -t [name] # 进入session tmux kill-s ...

  3. (十四)Centos之安装vsftp服务

    一.为什么要安装vsftp服务 我们需要向centos操作系统的服务器上上传文件或者下载文件,这时候,ftp有必要安装下,我们选择主流的vsftp 二.安装 第一步:安装vsftp yum insta ...

  4. Core Data 的使用

    一.概念 1.Core Data 是数据持久化存储的最佳方式 2.数据最终的存储类型可以是:SQLite数据库,XML,二进制,内存里,或自定义数据类型 在Mac OS X 10.5Leopard及以 ...

  5. Python3多重继承排序原理(C3算法)

    参考:https://www.jianshu.com/p/c9a0b055947b https://xubiubiu.com/2019/06/10/python-%E6%96%B9%E6%B3%95% ...

  6. 写一个java常用的加密工具类

    1.叙述 java security包下有很多加密算法类,我们可以很简单的调用它们.他们虽然功能很全,但是使用起来步骤有些繁琐.我在这里封装来一些常用的加密算法及他们常用的一些方法,来简化代码. 工具 ...

  7. SSRF——weblogic vulhub 漏洞复现及攻击内网redis(一)(附批量检测脚本)

    0X01 概述 SSRF(Server-Side Request Forgery, 服务端请求伪造)利用漏洞可以发起网络请求来攻击内网服务.利用SSRF能实现以下效果:1)        扫描内网(主 ...

  8. vue中的$attrs属性和inheritAttrs属性

    一.vue中,默认情况下,调用组件时,传入一些没有在props中定义的属性,会把这些“非法”属性渲染在组件的根元素上(有一些属性除外),而这些“非法”的属性会记录在$attrs属性上. 二.如何控制不 ...

  9. Memcached的安装与常用命令

    一.概述 MSM:Memcached-Session-ManagerMemcached是一款高性能.分布式的内存对象缓存系统 二.安装Memcached 在安装Memcached之前,我们需要先安装上 ...

  10. Snapshot Array

    Implement a SnapshotArray that supports the following interface: SnapshotArray(int length) initializ ...