关于滚动条的设计，需要用到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. PHP正则表达式核心技术完全详解 第1节

    作者:极客小俊 一个专注于web技术的80后 我不用拼过聪明人,我只需要拼过那些懒人 我就一定会超越大部分人! CSDN@极客小俊,原创文章, B站技术分享 B站视频 : Bilibili.com 个 ...

  2. 动态代理:jdk动态代理和cglib动态代理

    /** * 动态代理类:先参考代理模式随笔,了解代理模式的概念,分为jdk动态代理和cglib,jdk动态代理是通过实现接口的方式创建代理类的,cglib是通过继承类的方式实现的代理类的 * jdk动 ...

  3. Hibernate4.3基础知识1

    一.Hibernate 开发环境搭建 4.3 1.导包    2.创建hibernate.cfg.xml配置文件   3.创建实体类   4.创建映射文件 实体类名.hbm.xml  配置文件 二.h ...

  4. Oracle 11G RAC11.2.0.4 + Redhat7.3安装手册

    安装思路: 1.安装两台redhat7 linux系统 2.网络配置(双网卡,public,vip,private,scan) 3.存储配置(内存配置,ASM共享存储:6块5G共享盘udev,根目录留 ...

  5. # mac使用homebrew安装jdk和tomcat

    homebrew安装jdk 前提是已经安装homebrew //直接命令行安装 brew cask install homebrew/cask-versions/adoptopenjdk8 homeb ...

  6. tensorflow(一)：基础

    一.张量 1.张量的概念 在TensorFlow中,所有的数据都通过张量的形式来表示.从功能的角度,张量可以简单理解为多维数组,零阶张量表示标量(scalar),也就是一个数:一阶张量为向量(vect ...

  7. Java知识系统回顾整理01基础06数组06二维数组

    一.一维数组和二维数组 这是一个一维数组, 里面的每一个元素,都是一个基本类型int int a[] =new int[]{1,2,3,4,5}; 这是一个二维数组,里面的每一个元素,都是一个一维数组 ...

  8. C# 中的延时的方法。

    转载:https://blog.csdn.net/caixiexin/article/details/5769121 System.Threading.Thread.Sleep(2000); 其中20 ...

  9. DoModal 函数的用法

    转载:https://blog.csdn.net/mpp_king/article/details/79707728                        https://www.cnblog ...

  10. DX12龙书 01 - 向量在几何学和数学中的表示以及运算定义

    0x00 向量 向量 ( vector ) 是一种兼具大小 ( magnitude ) 和方向的量. 0x01 几何表示 几何方法中用一条有向线段来表示一个向量,其中,线段长度代表向量的模,箭头的指向 ...