css3修改滚动条样式
/*滚动条整体样式*/
/*高宽分别对应横竖滚动条的尺寸*/
.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修改滚动条样式的更多相关文章
- CSS3自定义滚动条样式 -webkit-scrollbar
今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- css3美化滚动条样式
1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...
- css 溢出滚动条显示,修改滚动条样式
文本或者内容溢出滚动条显示: a/横纵都出滚动条:css添加属性{overflow:auto;} b/横向滚动条:css添加属性{overflow-x:auto;} c/纵向滚动条:css添加属性{o ...
- CSS3自定义滚动条样式 -webkit-scrollbar(转)
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS3自定义滚动条样式 之 -webkit-scrollbar
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS3自定义滚动条样式 -webkit-scrollbar (一)
Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scroll ...
- 滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)
有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼 ...
- vue中修改滚动条样式
这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就 ...
随机推荐
- [Writeup]与佛论禅
[Writeup]与佛论禅 垂死梦中惊坐起,李sin参悟佛真意 看题 沙雕sl宋雷发给我一道题 他用(Quoted-Printable)解出来一个奇怪经文(偷学) 李sin你怎么看?此中必有蹊跷! 前 ...
- js五子棋游戏
//code <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- centos使用记
20180404:今天在笔记本上安装了centos6.9,第一次安装的7.4时进不了安装界面,后来下载了6.9版的,可以安装.安装完后启动时出现fail reg的错误,然后提示登陆,不知是用户名为:r ...
- 对象 Object
在js 中创建最简单的对象,然后给它添加属性或者方法 示例如下: var obj = new Object(); //或者 var obj = {}; obj.name = '张三'; obj.fun ...
- get return value of python in shell
from: https://stackoverflow.com/questions/2115615/assigning-value-to-shell-variable-using-a-function ...
- Vue router 的使用--初级
在说 VueRouter 之前,首先要弄明白vueRouter 是干什么的,有什么用 说出来其实很简单,就是一个模板替换的问题,当路由改变的时候,把和路由相关的模板显示出来,就是这么简单.但是,当我们 ...
- Java读写hdfs上的avro文件
1.通过Java往hdfs写avro文件 import java.io.File; import java.io.IOException; import java.io.OutputStream; i ...
- 尚硅谷springboot学习8-yaml基本语法
1.基本语法 k:(空格)v:表示一对键值对(空格必须有): 以空格的缩进来控制层级关系:只要是左对齐的一列数据,都是同一个层级的 server: port: 8081 path: /hello 属性 ...
- 火兰hillstone与fortigate之ipsec v.p.n连接实践
文章目录 参考文档: http://ismailaktas.com.tr/hillstone-to-fortigate-ipsec-vpn/ https://wenku.baidu.com/view/ ...
- HttpURLConnection 添加代理
//创建代理服务器 Proxy proxy = new Proxy(Proxy.Type.HTTP, new InetSocketAddress("www.proxyaddress.com& ...