关于滚动条的设计，需要用到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. 源码分析springboot自定义jackson序列化，默认null值个性化处理返回值

    最近项目要实现一种需求,对于后端返回给前端的json格式的一种规范,不允许缺少字段和字段值都为null,所以琢磨了一下如何进行将springboot的Jackson序列化自定义一下,先看看如何实现,再 ...

  2. Mysql的ONLY_FULL_GROUP_BY

    今天在测试环境遇到一个问题,本地测试是没有问题,在测试环境sql报错了: nested exception is com.mysql.jdbc.exceptions.jdbc4.MySQLSyntax ...

  3. JAVA基础之代码简洁之道

    引言 普通的工程师堆砌代码,优秀的工程师优雅代码,卓越的工程师简化代码.如何写出优雅整洁易懂的代码是一门学问,也是软件工程实践里重要的一环.--来自网络 背景 软件质量,不但依赖于架构及项目管理,更与 ...

  4. Centos-zip压缩-文件或目录-zip unzip

    zip uzip 将一般文件或者目录进行压缩或者解压,默认以 .zip为后缀名 zip 相关选项 -r 递归压缩目录 -d 从压缩包中删除指定文件 -i  压缩指定文件列表文件 -x 压缩排除指定文件 ...

  5. STM32的CCM RAM

    STM32F407ZGT6的Flash大小为1MB,SRAM大小为(128KB+64KB). 这里SRAM之所以分开表示是因为在芯片内部前面的128KB和后面的64KB地址不是连续的,后面的64KB在 ...

  6. “工程师思维” VS. “学院派思维”

    1.与"工程师"交流,他们致力于"更快.高质量"交付,他们会借助时下最稳定.最完善的中间件或者框架,他们更谦虚,喜欢和志同道合的朋友交流分享协作,视角更宽,往往 ...

  7. Jupyter 绘图怎么显示中文

    1. 简单加2行代码即可. import matplotlib.pyplot as plt plt.rcParams['font.sans-serif'] = [u'SimHei'] plt.rcPa ...

  8. 【题解】CF1207E XOR Guessing

    Link 这是一道交互题. \(\text{Solution:}\) 观察到猜的数范围只有\(2^{14}.\) 我第一次想到的方法是,我们可以确定系统选择的两个数的异或和,用这个异或和去穷举所有目标 ...

  9. Keil ARm新建项目

    一.新建一个工程 选好芯片后确认,完成创建 二.新建一个文件 保存为后缀名为*.c的文件 三.把文件添加进项目里面 四.测试 发现有警告 五.给项目添加特定的文件,去除警告或错误 现在保存项目的文件夹 ...

  10. java安全编码指南之:lock和同步的正确使用

    目录 简介 使用private final object来作为lock对象 不要synchronize可被重用的对象 不要sync Object.getClass() 不要sync高级并发对象 不要使 ...