/*滚动条整体样式*/
/*高宽分别对应横竖滚动条的尺寸*/
.content-box::-webkit-scrollbar{
width: 4px;
height: 4px;
}
/*滚动条里面小方块*/
.content-box::-webkit-scrollbar-thumb{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
/*滚动条里面轨道*/
.content-box::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}

css3修改滚动条样式的更多相关文章

  1. CSS3自定义滚动条样式 -webkit-scrollbar

    今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...

  2. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  3. css3美化滚动条样式

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

  4. css 溢出滚动条显示,修改滚动条样式

    文本或者内容溢出滚动条显示: a/横纵都出滚动条:css添加属性{overflow:auto;} b/横向滚动条:css添加属性{overflow-x:auto;} c/纵向滚动条:css添加属性{o ...

  5. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  6. CSS3自定义滚动条样式 之 -webkit-scrollbar

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

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

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

  8. 滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)

    有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼 ...

  9. vue中修改滚动条样式

    这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就 ...

随机推荐

  1. RxJava学习(一)——简介及其优势

    参考:给 Android 开发者的 RxJava 详解 RxJava是什么 RxJava 在 GitHub 主页上的自我介绍是 "a library for composing asynch ...

  2. http://www.cnblogs.com/hanshuhe/archive/2012/08/30/vss.html

    http://www.cnblogs.com/hanshuhe/archive/2012/08/30/vss.html

  3. dev16 cxgrid 在DLL里报0地址错

    dev16 cxgrid 在DLL里Form里使用,报0地址错,在EXE里正常.c++builder 的DLL报错,delphi也报错. First chance exception at $09CE ...

  4. DOS 格式化日期时间输出

    if "%date:~5,2%" lss "10" (set mm=0%date:~6,1%) else (set mm=%date:~5,2%)if &quo ...

  5. Erlang 笔记

    集成开发环境:IntelliJ IDEA的Erlang插件 教程:www.erlang-cn.com/462.html,寻找erlang程序设计第2版pdf f():释放之前绑定过的所有变量. -ex ...

  6. 2339 3.1.1 Agri-Net 最短网络

    Description 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助. 约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路共享 ...

  7. 手工获取AWR报告

    AWR(Automatic Workload Repository)报告常用于Oracle数据库性能分析.熟练解读AWR报告有助于快速分析Oracle性能问题.下面主要描述如何手工获取AWR报告. 操 ...

  8. Oracle分区表常见操作

    Oracle分区表常用于业务中大表使用,如历史交易记录表等,提高表记录查询效率.本文主要描述范围分区表的创建.新增以及索引创建. Oracle操作分区表相关信息 显示数据库所有分区表的信息:DBA_P ...

  9. Linux IP和网关配置

    操作环境 SuSE11/SuSE10 配置方法一<永久有效,重启不失效> 通过修改/etc/sysconfig/network/ifcfg-eth*文件直接配置,服务器重启不失效,建议使用 ...

  10. SSL协议(安全套接层协议)

    SSL是Secure Sockets Layer(安全套接层协议)的缩写,可以在Internet上提供秘密性传输.Netscape公司在推出第一个Web浏览器的同时,提出了SSL协议标准.其目标是保证 ...