关于滚动条的设计，需要用到css3的微元素，都列在下边吧（以Chrome内核webkit为例）。

-webkit-scrollbar     滚动条的整体轮廓，width表示纵向滚动条的宽度，height表示横向滚动条的高度。

-webkit-scrollbar-track     滚动轨迹

-webkit-scrollbar-thumb   滚动滑块

-webkit-scrollbar-corner   滚动条右下角的小正方形

做个例子参考一下：

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4   <meta charset="UTF-8">

 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">

 6   <title>Document</title>

 7   <style>

 8     .box{

 9       width: 800px;

10       height: 500px;

11       overflow: auto;

12       margin: 20px auto;

13       background-color: #ccc;

14       border: 1px solid #ccc;

15       border-radius: 10px;

16       padding: 5px;

17     }

18     .box::-webkit-scrollbar{

19       width: 6px;

20       height: 6px;

21     }

22     .box::-webkit-scrollbar-track, .box::-webkit-scrollbar-thumb{

23       border-radius: 999px;

24     }

25     .box::-webkit-scrollbar-track{

26       background-color: rgba(0, 0, 0, 0.2);

27     }

28     .box::-webkit-scrollbar-thumb{

29       background-color: rgba(90, 18, 18, 0.5);

30     }

31     .box::-webkit-scrollbar-corner{

32       background: transparent;

33     }

34     p{

35       color: #6e3737;

36       text-align: center;

37       line-height: 30px;

38       white-space: nowrap;

39     }

40   </style>

41 </head>

42 <body>

43   <div class='box'>

44     <p>css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化css3视线滚动条样式优化</p>

45     <p>1</p>

46     <p>2</p>

47     <p>3</p>

48     <p>4</p>

49     <p>6</p>

50     <p>7</p>

51     <p>8</p>

52     <p>9</p>

53     <p>9</p>

54     <p>9</p>

55     <p>9</p>

56   </div>

57 </body>

58 </html>

css3滚动条样式美化的更多相关文章

  1. 自定义滚动条样式-兼容IE

    滚动条样式设置 html部分: 1 <div id="scroll" style="width: 500px; height: 300px; border: 2px ...

  2. NB的CSS样式集锦1——CSS3滚动条美化,CSS3滚动条皮肤

    转自:http://www.pengyaou.com/codecss3/POKDNMS_112.html CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrol ...

  3. css3美化滚动条样式

    1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...

  4. CSS3滚动条美化,CSS3滚动条皮肤

    CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这 ...

  5. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  6. CSS3自定义滚动条样式 -webkit-scrollbar

    今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...

  7. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  8. 笔记：css3伪选择器改变滚动条样式

    现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...

  9. 【CSS3】自定义滚动条样式 -webkit-scrollbar

    好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scroll ...

随机推荐

  1. pwnable.kr-uaf-witeup

    没错,这道题超纲了,代码调试能力很差很差. 一些相关小笔记. UAF是在内存释放后,原指针仍然指向此内存,可通过其他填充操作将此内存值设为指定的值,使得指针指向特定值. 分析程序.本程序中,可输入1. ...

  2. burp suite之Target(目标)

    Target : 将攻击的目标,全部展现到Target下. Site map:站点地图 Scope: 范围 目录爬行: 复制所有子目录的链接 Spidor this host: 发送至Spidor选项 ...

  3. Python-随机模块-random

    random 生成随机变量 生成 [0, 1) 随机数 .random import random random_number = random.random() print(random_numbe ...

  4. Python-IndentationError: expected an indented block

    Error: IndentationError: expected an indented block Where? Python代码执行时候报这个错误 Why? Python代码具有严格缩进规范,默 ...

  5. 注册表“CLSID”下面的“InprocServer32”子键是什么？

    这个键值有什么用?每个CLSID下基本都有,即使没有其它项也会有此项.谁能详细说下,"InprocServer32"子键起什么作用?谢了. 刚好遇到这问题了,这是我找到的:Inpr ...

  6. 安装、验证安装 Oracle Database XE 11gR2

    操作系统:Windows 10 x64 第一节:下载 Oracle Database XE 11gR2 第二节:安装.验证安装 Oracle Database XE 11gR2 第三节:Oracle ...

  7. Trie树【字典树】浅谈

    最近随洛谷日报看了一下Trie树,来写一篇学习笔记. Trie树:支持字符串前缀查询等(目前我就学了这些qwq) 一般题型就是给定一个模式串,几个文本串,询问能够匹配前缀的文本串数量. 首先,来定义下 ...

  8. 手把手教你安装TensorFlow2 GPU 版本

    参考博客:https://blog.csdn.net/weixin_44170512/article/details/103990592 (本文中部分内容引自参考博客,请大家支持原作者!) 感谢大佬的 ...

  9. 在自己电脑上查看git远程分支列表比实际云端的远程分支要多一些

    问题 最近打开一个很久没有打开过的项目,使用git branch -a查看了一下所以分支,其中有些远程分支没有什么用了 于是准备去gitlab上删除它,结果到gitlab上发现没有这些分支,猜测是自己 ...

  10. 在Windows7系统中设置虚拟内存大小

    当我们的电脑物理内存空间不够用时,操作系统就会自动从硬盘空间上分出一块空间来当内存使用,这就是虚拟内存.可以说虚拟内存是物理内存的补充,是备用的物理内存.一般来说,如果电脑里的程序不多,占用内存资源不 ...