/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 5px;
height: 110px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #bdbdbd;
}
/*滑块效果*/
::-webkit-scrollbar-thumb:hover
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}

CSS设置浏览器滚动条样式的更多相关文章

  1. CSS——改变浏览器滚动条样式

    https://www.cnblogs.com/sun-rain/p/5789417.html

  2. 关于Angular+ngx-perfect-scrollbar自定义各大浏览器滚动条样式的解决方法

    资料: http://manos.malihu.gr/jquery-custom-content-scroller/  (此项是结合Jquery使用的,在此并未采用) https://www.npmj ...

  3. CSS系列——浏览器默认样式

    了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...

  4. css清除浏览器默认样式

    css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...

  5. css 改变浏览器滚动条的样式

    /*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .i ...

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

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

  7. [分享]CSS美化浏览器滚动条

    今天看到一个站点的滚动条样式特别漂亮,顺便上网搜了一些相关资料,分享给大家: PS:兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏 ...

  8. css控制默认滚动条样式

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

  9. CSS3自定义浏览器滚动条样式

    一个完整滚动条右以下部分组成: ::-webkit-scrollbar 滚动条整体部分,常用属性:width,height,background,border: ::-webkit-scrollbar ...

随机推荐

  1. 小甲鱼Python第四讲课后习题

    1while语句中,当条件为真时,它会一直循环下去,比如下面的例子,不过可以用Ctral + C来强制结束 while 'C': print("i love you") 2.观察打 ...

  2. jquery .stop()的用法

    jquery的.stop()的用法: 目的:为了 了解stop()的用法,举个例子,直观的方式看看. 实物:一个id="animater"的div包含了一段文字.(以下用anima ...

  3. Mac流量监控/硬盘监控小工具

    效果: 中文版: https://member.ipmu.jp/yuji.tachikawa/MenuMetersElCapitan/ 官方版: https://github.com/yujitach ...

  4. javaScript系列 [06]-javaScript和this

    在javaScript系列 [01]-javaScript函数基础这篇文章中我已经简单介绍了JavaScript语言在函数使用中this的指向问题,虽然篇幅不长,但其实最重要的部分已经讲清楚了,这篇文 ...

  5. Linux(CentOS)下,下载安装Nginx并配置

    1.准备工作选首先安装这几个软件:GCC,PCRE(Perl Compatible Regular Expression),zlib,OpenSSL.Nginx是C写的,需要用GCC编译:Nginx的 ...

  6. shell编程学习笔记(六):cat命令的使用

    这一篇不是讲shell编程的,专门讲cat命令.shell编程书用到了这个cat命令,顺便说一下cat命令. cat命令有多种用法,我一一来列举(以下蓝色字体部分为Linux命令,红色字体的内容为输出 ...

  7. InfluxDB源码阅读之snapshotter服务

    操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 InfluxDB版本:1.1.0 服务模块介绍 源码路径: github.com/influxda ...

  8. Gitlab团队协作流程

    一:加入群组 项目管理员添加用户到群组,赋予权限(owner.developer...). 二:拉取项目,建立分支 通过git clone拉取项目到本地,通过终端打开项目目录,创建自己的分支,并推送到 ...

  9. 转-编写CGI小结

    由于Carl要用到我的程序,我们便合作工作.但是他写的程序是Python的,我写的程序是Java的,必须得找一种方式进行通信.尽管有Jython这些东西,但是Carl认为还是CGI最简便.于是,前阵子 ...

  10. lsb_release command not found

    Linux里的lsb_release命令用来查看当前系统的发行版信 息(prints certain LSB (Linux Standard Base) and Distribution inform ...