关于滚动条的设计，需要用到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. 解析Vue-router相关干货及工作原理

    本文主要介绍了vue-router相关基础知识及单页面应用的工作原理,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 单页面工作原理是通过浏览器U ...

  2. Python练习题 009：水仙花数

    [Python练习题 009] 打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数& ...

  3. Spring Cloud系列（四）：Eureka源码解析之客户端

    一.自动装配 1.根据自动装配原理(详见:Spring Boot系列(二):Spring Boot自动装配原理解析),找到spring-cloud-netflix-eureka-client.jar的 ...

  4. Arduino 跑马灯

    参考: 1. https://blog.csdn.net/hunhun1122/article/details/70254606 2. http://www.51hei.com/arduino/392 ...

  5. JavaScript 将十进制数转换成格式类似于 0x000100 或 #000100 的十六进制数

    将十进制数转换成格式类似于 0x000100 或 #000100 的十六进制数 1 <!DOCTYPE html> 2 <html> 3 <head> 4 < ...

  6. 使用 .NET 进行游戏开发

    微软是一家综合性的网络公司,相信这点来说不用过多的赘述,没有人不知道微软这个公司,这些年因为游戏市场的回报,微软收购了很多的游戏公司还有独立工作室,MC我的世界就是最成功的的案例,现在市值是排在全世界 ...

  7. Android Studio3.5在编译项目出现连接不上gradle该怎么办？

    ------------恢复内容开始------------ 报错原因: Could not get resource 'https://dl.google.com/dl/android/maven2 ...

  8. 用 Java 实现的八种常用排序算法

    八种排序算法可以按照如图分类 交换排序 所谓交换,就是序列中任意两个元素进行比较,根据比较结果来交换各自在序列中的位置,以此达到排序的目的. 1. 冒泡排序 冒泡排序是一种简单的交换排序算法,以升序排 ...

  9. git 本地回滚到上一个版本

    linux下是 git reset --hard HEAD^ windows下是 git reset --hard HEAD"^"

  10. DM9000时序设置

    想了解一下DM9000的移植修改原理,所以分析了一下时序图和引脚连接   首先看一下DM9000的引脚和MINI2440的引脚连接   DM9000  MINI2440 功能描述   SD0   DA ...