用css 修改 谷歌浏览器自带的 滚动条样式
::-webkit-scrollbar {
width: 0.5rem;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(142,143,145,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(169,169,169,0.4);
}
用css 修改 谷歌浏览器自带的 滚动条样式的更多相关文章
- 纯css修改单选、复选按钮样式
只支持IE9及以上 html <label><input class="radio" type="radio" name="radi ...
- CSS - 修改input - placeholder 和 readonly 的样式
placeholder ::-webkit-input-placeholder { /* WebKit browsers */ color: #999999; } :-moz-placeholder ...
- css修改整个项目的滚动条样式
在项目中,滚动条不可避免的药出现.设置统一规范的滚动条也是必然.用一个独立的css文件即可修改整个项目中的滚动条样式 . scrollBar.css: /* 滚动条有滑块的轨道部分 */ ::-web ...
- CSS自定义滚动条样式
原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...
- CSS 个性化滚动条样式
页面中有许多内容过多时,为了不影响整体布局,总会有滚动效果代替.but,许多情况浏览器自带的滚动条样式与整体UI 界面不搭啊,怎么办,当然作为界面的化妆师CSS就出手啦~ 滚动条样式由多个伪类组成 下 ...
- DIV 自定义滚动条样式(二)
流浏览器自带的滚动条样式很丑,确实有必要美化. 滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主 ...
- css 溢出滚动条显示,修改滚动条样式
文本或者内容溢出滚动条显示: a/横纵都出滚动条:css添加属性{overflow:auto;} b/横向滚动条:css添加属性{overflow-x:auto;} c/纵向滚动条:css添加属性{o ...
- [分享] 通过修改CSS自定义chrome滚动条样式
首先得说一句 我不懂CSS的写法之类的 这段CSS也是在网上找的 所以有更先进的需求的话 我肯定不能满足你们了 不好意思效果图在10楼有人上了 我这边不管怎么弄 上传图片都卡在96% 而且不翻wall ...
- css修改滚动条默认样式
之前因为公司项目需要,在网上找到的: 直接上代码了 html代码 <div class="inner"> <div class="innerbox&qu ...
随机推荐
- Python学习之迭代器和生成器
那么首先什么是迭代器和生成器呢? 迭代器即迭代的工具,那么什么又是迭代呢?所谓迭代:迭代是一个重复的过程,每次重读即一次迭代,并且每次迭代的结果都是下一次迭代的初始值.例: l=[1,2,3] cou ...
- Detect Changes in Network Connectivity
Some times you will need a mechanism to check whether changes to network occurring during running yo ...
- python列表,元组,字典和字符串之间的相互转换
元组转换成列表 >>> mytuple = (1,2,3) >>> print list(mytuple) [1, 2, 3] 列表转换成元组 >>&g ...
- 2017-2018-1 20155320 课堂测试(ch06)
2017-2018-1 20155320 课堂测试(ch06) 1.(单选题 | 1 分) 下面代码中,对数组x填充后,采用直接映射高速缓存,所有对x和y引用的命中率为(D) A . 1 B . 1/ ...
- 使用开源软件 enfuse 做照片的曝光合成
使用开源软件 enfuse 做照片的曝光合成 所谓曝光合成就是对同一场景用不同的曝光量拍摄多张照片,然后将这些照片再合成为一张照片.之所以我们要这么做是因为现在的相机感光的动态范围相比人眼实在是太小了 ...
- nginx反向代理解决wechat图片问题
在nginx 中nginx.conf开启反向代理 location ^~ /wechat_image/ { add_header 'Access-Control-Allow-Origin' " ...
- sprinboot之mongodb
一.MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当 ...
- maven的pom文件报错: must be "pom" but is "jar"
问题 Project build error: Invalid packaging for parent POM com.test:hello-parent:0.0.1-SNAPSHOT (E:\ec ...
- Python爬虫之HTTP和HTTPS
一:HTTP和HTTPS HTTP协议(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收 HTML页面的方法,以明文的形式传输,效率高,但是不安全 HTTPS ...
- 【JUC源码解析】ScheduledThreadPoolExecutor
简介 它是一个线程池执行器(ThreadPoolExecutor),在给定的延迟(delay)后执行.在多线程或者对灵活性有要求的环境下,要优于java.util.Timer. 提交的任务在执行之前支 ...