/*滚动条样式*/
.innerbox::-webkit-scrollbar {/*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
.innerbox::-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);
}
.innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius:;
background: rgba(0,0,0,0.1);
}
<div class="inner">
<div class="innerbox">
<p style="height:200px;">这是内容111</p>
<p style="height:400px;">这里是内容222</p>
<p>这里是内容333</p>
</div>
</div>

css 改变浏览器滚动条的样式的更多相关文章

  1. CSS——改变浏览器滚动条样式

    https://www.cnblogs.com/sun-rain/p/5789417.html

  2. 如何改变iframe滚动条的样式?

    如何改变iframe滚动条的样式? web前端开发 css javascript iframe html RayLiao 2014年11月19日提问 · 2014年11月20日更新 关注 关注 收藏 ...

  3. CSS改变浏览器默认滚动条样式

    前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目 ...

  4. 自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

    前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...

  5. [分享]CSS美化浏览器滚动条

    今天看到一个站点的滚动条样式特别漂亮,顺便上网搜了一些相关资料,分享给大家: PS:兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏 ...

  6. css修改overflow滚动条默认样式

    html代码 <div class="inner"> <div class="innerbox"> <p style=" ...

  7. [原创作品]html css改变浏览器选择文字的背景和颜色

    又很久没有'剥壳'了,最近在为一家公司做一个生产管理解决方案.所以都很忙.今天的话题很简单,就做一个很简单的网页特效.今天偶然浏览到一个网站,他们在选择文字时,样子不是蓝背景和白色字体那么单调,感觉这 ...

  8. CSS设置浏览器滚动条样式

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 110px; background-color: #F5 ...

  9. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

随机推荐

  1. hdu 3836 Equivalent Sets trajan缩点

    Equivalent Sets Time Limit: 12000/4000 MS (Java/Others)    Memory Limit: 104857/104857 K (Java/Other ...

  2. mongdb使用技巧

    进入shell的方法:mongo 命令   # 使用系统服务启动 mongodb /etc/init.d/mongod # 或 service mongod start # 或 service mon ...

  3. tornado关于AsyncHTTPClient的使用笔记

    先来一段同步的httpclient使用代码 url = 'https://www.baidu.com/' http_client = HTTPClient() response = http_clie ...

  4. 解决UnicodeEncodeError: 'gbk' codec can't encode character u'\u25aa' in position 344 : illegal multiby

    Python拿来做爬虫的确很不错,但是字符串的编码的确是稍不留神就是一个坑,GBK编码和Unicode编码的转化出现问题也是很多的,今天在解析网页数据的时候出现上述错误,解决方案如下: one_str ...

  5. eclipse打开失败

    以前eclipse运行好好的,某一次运行启动不了,一直图标那里转圈,不能启动, 运行eclipsec.exe后,查看发现出现以下错误 SLF4J: Class path contains multip ...

  6. python3.5学习第一章

    在python中,变量赋值或者其他语句后不需要加”:“ python中,缩进特别重要! 条件语句和循环语句,要加”:“ 一.变量赋值 name = "cecelia"name2 = ...

  7. RPG游戏中如何判断敌人是否在玩家的攻击范围之内

    // 方式1:通过主角和场景中的所有敌人比较 private void AtkCondition1(float _range,float _angle) { // 搜索所有敌人列表(在动态创建敌人时生 ...

  8. UnityShader中的语义相关

    语义简介:实际上就是一个表达参数含义的字符串. 应用阶段到顶点着色器时用常用的语义如下: POSITION:模型空间中的顶点坐标 NORMAL:模型空间中的法线方向 TANGENT:模型空间中的切线方 ...

  9. Python全栈开发-Day10-进程/协程/异步IO/IO多路复用

    本节内容 多进程multiprocessing 进程间的通讯 协程 论事件驱动与异步IO Select\Poll\Epoll——IO多路复用   1.多进程multiprocessing Python ...

  10. English trip EM2-PE-1B Teacher:Patirck

    PE = 演讲课 课上内容(Lesson) How are you today?  你今天怎么样? What is your name?  你的名字叫什么? What do you come from ...