/*滚动条整体样式*/
/*高宽分别对应横竖滚动条的尺寸*/
.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 下使用 curl post

    命令: curl -X POST -d @/etc/lazada/lazada_tracking.txt   http://localhost:8080/booking/rs/LazadaServic ...

  2. linux centos7.5修改主机名和ip永久生效

    以centos7.5为例 1.修改主机名 [root@localhost ~]# hostname localhost.localdomain[root@localhost ~]# hostname ...

  3. NRF51822之FICR

    uint32_t deviceID[2];union{    uint32_t  DW;    uint8_t   B[4];} device_ID;//read device ID deviceID ...

  4. 机器学习进阶-目标跟踪-KCF目标跟踪方法 1.cv2.multiTracker_create(构造选框集合) 2. cv2.TrackerKCF_create(获得KCF追踪器) 3. cv2.resize(变化图像大小) 4.cv2.selectROI(在图像上框出选框)

    1. tracker = cv2.multiTracker_create() 获得追踪的初始化结果 2.cv2.TrackerKCF_create() 获得KCF追踪器 3.cv2.resize(fr ...

  5. get return value of python in shell

    from: https://stackoverflow.com/questions/2115615/assigning-value-to-shell-variable-using-a-function ...

  6. 利用目录函数(opendir,readdir,closedir)查找文件个数

    如何知道一个目录下的所有文件个数呢?或许可以用tree来学(zhuang)习(bi)的同时知道文件个数.Linux系统io函数为我们提供了目录操作函数,其中有一个比较重要(实际上有三个,因为它们经常配 ...

  7. jeecg使用小结

    1.上传word模板时报“java.lang.UnsatisfiedLinkError: no jacob-1.17-M2-x64 in java.library.path”异常 原因:jdk下没有找 ...

  8. Extjs获取Form中的数据

    var win = Ext.create("Ext.window.Window",{ width:300, height:200, title:"日期选择窗口" ...

  9. 免費查看SQL PLAN的工具 - SQL Sentry Plan Explorer

    今天 Terry大 介紹給小弟這個 SQL Sentry Plan Explorer 工具,可以用來看SQL Plan. 什麼? 用SSMS看不就很清楚了嗎? 這個Tool有把SQL Plan幫我們整 ...

  10. Java复习 之多线程

    线程是一个程序中的不同路径 例子1 只有一条路径 每一个分支都是一个线程 实际上在一个时刻内 电脑只能运行一个进程 但是因为cpu运算速度很快 将时间分出来了 所以我们感觉是同时运行 创建线程的两种方 ...