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

  /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
::-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中将一个反斜杠转换成两个反斜杠

    代码示例: s = s.replaceAll("\\\\", "\\\\\\\\");

  2. LODOP在页面让客户选择打印机

    获取打印机列表可以放在onload事件里,如过当前是使用的c-lodop,由于websoket链接需要时间,一进入页面可能会报错,被准备好或网页没下载完成等,也可以在点击事件里让用户获取打印机.之前写 ...

  3. SSRS 2016 Forms Authentication

    SSRS 2016 comes with completely new report manager web interface and implementing form authenticatio ...

  4. Docker 容器的通信(十二)

    目录 一.容器间通信 1.IP 通信 2.Docker DNS Server 3.joined 容器 二.容器访问外部网络 三.外部网络访问容器 1.随机端口 2.指定端口 3.不指定任何端口. 4. ...

  5. PPM / PGM / PBM 图像文件格式

    PPM / PGM / PBM 图像文件格式 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:在进行图像压缩后传输,然后解压缩显示的过程中,通常会用到P ...

  6. Snapshot Array

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

  7. K8S从入门到放弃系列-(14)Kubernetes集群Dashboard部署

    Dashboard是k8s的web界面,用户可以用 Kubernetes Dashboard 部署容器化的应用.监控应用.并对集群本身进行管理,在 Kubernetes Dashboard 中可以查看 ...

  8. Redis 常用命令学四:集合类型命令

    1.增加和删除命令 127.0.0.1:6379> SADD st a (integer) 1 127.0.0.1:6379> SADD st r f g (integer) 3 127. ...

  9. 数据结构 -- Trie字典树

    简介 字典树:又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种. 优点:利用字符串的公共前缀来减少查询时间,最大限度地减少无谓的字符串比较,查询效率比哈希树高. 性质:   1.  根节 ...

  10. VS2010 MFC的按钮风格改变

    改变VS2010 MFC的按钮风格 VS2010建的MFC工程按钮默认的风格类似VC6.0(直角矩形),如想美观按钮改为WIN7的按钮风格(圆角矩形),只需在代码中找到头文件"stdafx. ...