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

  /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
::-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. web端安全测试工具

    https://www.cnblogs.com/ios9/p/7692373.html 十大web安全扫描工具 扫描程序可以在帮助造我们造就安全的Web 站点上助一臂之力,也就是说在黑客“黑”你之前, ...

  2. 关于appium操作真机打开app之后无法定位页面元素的问题的解决办法

    appium操作真机打开app后无法定位页面元素:例如微信或者支付宝支付时,手机的安全控件会对支付环境进行保护,会断掉当前appium与真机的链接,导致连接失败,无法定位到页面元素,在做ui自动化之前 ...

  3. nginx多个if条件并且查询

    set $flag 0; if (!-e $request_filename){    set $flag "${flag}1"; } if ($uri ~* "^(.* ...

  4. 三节课MINI计划第四周

    一.任务 二.任务一 (一)梳理产品卖点 (二)策划线上活动 三.任务二 四.周报

  5. 最新 第一视频java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.第一视频等10家互联网公司的校招Offer,因为某些自身原因最终选择了第一视频.6.7月主要是做系统复习.项目复盘.Leet ...

  6. Dapper.NET—轻量ORM

    Dapper.NET使用 本文目录 Dapper.NET使用 1.为什么选择Dapper 2.以Dapper(4.0)为例. 2.1 在数据库中建立几张表. 2.2实体类. 3.使用方法 3.1  一 ...

  7. Qt 和 Boost关于信号和槽的对比说明

    对比 无论是 Qt 的实现方式还是 Boost 的实现方式,除了必须的定义信号和槽的类之外,都不需要额外的类. 两种实现都解决了类爆炸的问题.下面让我们对照着来看一下我们前面的分析. 两个不同的术语以 ...

  8. 我叫Tomcat:一款web服务器

    我叫Tomcat:一款web服务器 如何将我们的 Java 代码,运行在网络上,初学时,首先接触到的一般都是Servlet以及Jsp(或略过Jsp)而 Tomcat 就是这两者的容器,帮你处理动态网页 ...

  9. python中检测某个变量是否有定义

    目录 第一种方法使用内置函数locals() 第二种方法使用内置函数dir() 第三种方法使用内置函数vars() 第一种方法使用内置函数locals() 'testvar' in locals(). ...

  10. SAS学习笔记44 宏函数

    类SAS函数的宏函数 该部分函数共5个,其无论是名字.语法.功能都与SAS函数类似,只是在函数名前多了一个“%”.这5个宏函数分别是: %INDEX %LENGTH %SCAN %SUBSTR %UP ...