/*滚动条整体样式*/
/*高宽分别对应横竖滚动条的尺寸*/
.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. linux 如何统计某目录下所有文件个数

    该目录以及该目录的子目录下普通文件个数: ls -lR |grep '^-' |wc -l ls -l 查询该目录下的所有文件 R 包含子目录,其实就是递归查看 grep '^-' 表示过滤掉(以&q ...

  2. AspxGridView使用手记

    AspxGridView使用手记   一.  基本使用方法  4 1.导入Dll文件   4 2.Asp.Net页面控件注册 4 3. Asp.Net页面控件声明    5 4.删除licenses. ...

  3. day3 python 阿狸的进阶之路

    函数概念: 1.为什要有函数 组织结构不清晰,可读性差,代码冗余,可扩展性差. 2.什么是函数   具备某一个功能的工具--->函数     事先准备工具->函数的定义     拿来就用. ...

  4. tomcat监控脚本(监控进程,测试接口,告警动作为发送邮件)

    服务器环境:centos7.2 64位 tomcat8.5.6 tomcat 监控功能共需要两个脚本,如下: initMonitor.sh #!/bin/sh #初始化监控脚本相关变量 export ...

  5. CSS内容简单总结

    day50 1. 内容回顾 1. 伪类和伪元素        1. 伪类            1. :link            2. :visited            3. :hover ...

  6. iframe+form上传文件

    <iframe id="iframe1" name="ifra1" style="display: none"></ifr ...

  7. python 连接 Oracle 乱码问题(cx_Oracle)

    用python连接Oracle是总是乱码,最后发现时oracle客户端的字符编码设置不对. 编写的python脚本中需要加入如下几句: import os os.environ['NLS_LANG'] ...

  8. html:meta

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale= ...

  9. keal

    I remember the wonderful moment you appeared before me, like a fleeting vision, like a genius of pur ...

  10. docker-compose初试及命令基础

    转自:https://www.cnblogs.com/jsonhc/p/7811929.html 以一个简单的lnmp.yaml的配置文件进行讲解docker-compose命令的基础讲解,熟练掌握命 ...