关于滚动条的设计，需要用到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. NIO 实现简单群聊功能

    服务端: package com.yang.runnable; import java.io.IOException; import java.net.InetSocketAddress; impor ...

  2. Open CV leaning

    刚接触Open CV 几个比较好的介绍: OpenCV学习笔记:https://blog.csdn.net/yang_xian521/column/info/opencv-manual/3 OpenC ...

  3. [POI2005]SAM-Toy Cars 贪心+堆

    [POI2005]SAM-Toy Cars 题目:Jasio 是一个三岁的小男孩,他最喜欢玩玩具了,他有n 个不同的玩具,它们都被放在了很高的架子上所以Jasio 拿不到它们:为了让他的房间有足够的空 ...

  4. python中remove函数的坑

    摘要:对于python中的remove()函数,官方文档的解释是:Remove first occurrence of value.大意也就是移除列表中等于指定值的第一个匹配的元素. 常见用法: a ...

  5. ansible-playbook文件结构

    ansible-playbook文件结构: 1 --- 2 - name: play1 #指定的playbook名字 3 hosts: webservers #指定主机组 4 remote_user: ...

  6. Linux中断驱动程序

    1.中断概念 中断时一种电信号,由硬件设备产生,然后再由中断控制器向处理器发送相应的信号.处理器一经检测到该信号,便中断自己当前正在处理的工作,转而去处理中断.此后,处理器会通知操作系统已经产生中断. ...

  7. 2017-01-26--编译busybox总结

    错误一: ox@ubuntu:busybox-1.16.0$ make menuconfig Makefile:431: *** mixed implicit and normal rules: de ...

  8. MeteoInfoLab脚本示例：LaTeX写数学公式

    LaTeX是排版常用的语法,科学计算软件中也常用它来写数学公式(比如MatLab, Matplotlib等),MeteoInfo通过调用JMathLaTeX库也可以实现这样的功能.LaTeX的语法介绍 ...

  9. 【暑假集训】HZOI2019 水站 多种解法

    题目内容 已知有一个\(n\)层的水站: \(W_i\)表示未操作之前第\(i\)层的已有水量: \(L_i\)表示第\(i\)个水站能够维持或者储存的水的重量: 表示在第\(P_i\)层进行减压放水 ...

  10. P2340 [USACO03FALL]Cow Exhibition G题解

    新的奇巧淫技 原题传送门 众所周知,模拟退火是一种很强大的算法,DP很强,但我模拟退火也不虚,很多题你如果不会的话基本可以拿来水很多分.比如这道题,我用模拟退火可以轻松水过(虽然我是足足交了两页才过) ...