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

  /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
::-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. java代码规范好文推荐

    近期发现一遍好文章 看过之后觉得自己代码存在太多的问题 特此记录一下 和大家一起分享 https://xwjie.github.io/rule/

  2. 123457123457#1#-----com.threeapp.circlerunner01----儿童旋转跑酷游戏

    com.threeapp.circlerunner01----儿童旋转跑酷游戏

  3. 123457123456#1#-----com.threeapp.qianShuiTingYX01-----潜水艇跑酷游戏01

    com.threeapp.qianShuiTingYX01-----潜水艇跑酷游戏01

  4. Cognos Framework操作记录

    备注:这是我单位内部的Cognos Framework配置记录,里面涉及的名字等信息在其他使用环境需要进行相应修改. Cognos数据包配置 打开CYFTest项目, 右键点击andwdb的物理视图 ...

  5. CentOS 7启动与切换图形界面

    安装图形界面 默认情况下是不会安装图形界面的,所以需要自己手动安装,步骤如下: 1.开启系统,以root身份进入 安装X(X Window System),命令如下: yum groupinstall ...

  6. JAVA数据结构和算法 1-综述:数据结构和数据类型

    数据结构:指数据在计算机内存空间中或者磁盘中的组织形式. 对于数据结构的操作:插入.删除.查找.迭代遍历.排序等: Java.util包中含有诸如向量(一个可扩充的数组).栈.哈希表等类型的数据结构, ...

  7. 【miscellaneous】gstreamer构建的简单方法

    在博文"Gstreamer在Ubuntu上的安装和MP3的播放"中,写了在ubuntu上从头到尾构建gstreamer的详细过程,那是我在一次小项目培训中和队友一起努力了将近一周的 ...

  8. eclipse搭建springboot的项目

    记录一次自己搭建springboot的经历 springboot项目创建 这里借用别的博主分享的方法 https://blog.csdn.net/mousede/article/details/812 ...

  9. Java基础---Java方法的重载Overload

    对于功能类似的方法来说,因为参数列表不一样,却需要记住那么多不同的方法名称,太麻烦. 方法的重载(Overload):多个方法的名称一样,但是参数列表不一样.好处:只需要记住唯一一个方法名称,就可以实 ...

  10. Python中datetime库的用法

    datetime模块用于是date和time模块的合集,datetime有两个常量,MAXYEAR和MINYEAR,分别是9999和1. datetime模块定义了5个类,分别是 1.datetime ...