<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         body{

             /*ie下修改滚动条样式，在webkit内核浏览器无效*/

             /*scrollbar-arrow-color: #f4ae21;三角箭头的颜色

             scrollbar-face-color: #333; *立体滚动条的颜色

             scrollbar-3dlight-color: #666; 立体滚动条亮边的颜色

             scrollbar-highlight-color: #666; 滚动条空白部分的颜色

             scrollbar-shadow-color: #999; 立体滚动条阴影的颜色

             scrollbar-darkshadow-color: #666; 立体滚动条强阴影的颜色

             scrollbar-track-color: #666; 立体滚动条背景颜色

             scrollbar-base-color:#f8f8f8; 滚动条的基本颜色

             Cursor:url(mouse.cur);自定义个性鼠标*/

         }

         div{

             height:100px;

             width:200px;

             overflow:auto;

         }

         td{

             display:inline-block;

             margin:10px 20px;

         }

         /*webkit内核浏览器修改滚动条样式*/

         ::-webkit-scrollbar {

             width: 8px;

         }

         ::-webkit-scrollbar-thumb {

             border-radius: 10px;

             background: rgba(0,0,0,0.2);

         }

         ::-moz-scrollbar {

             width: 8px;

         }

         ::-moz-scrollbar-thumb {

             border-radius: 10px;

             background: rgba(0,0,0,0.2);

         }

         /*当前窗口未激活的情况下*/

         ::-webkit-scrollbar-thumb:window-inactive {

             background: rgba(0,0,0,0.1);

         }

         /*hover到滚动条上*/

         ::-webkit-scrollbar-thumb:vertical:hover{

             background-color: rgba(0,0,0,0.3);

         }

         /*滚动条按下*/

         ::-webkit-scrollbar-thumb:vertical:active{

             background-color: rgba(0,0,0,0.7);

         }

     </style>

 </head>

 <body>

     <div>

         <table>

             <tr>

                 <td>12345</td>

                 <td>12345</td>

             </tr>

             <tr>

                 <td>12345</td>

                 <td>12345</td>

             </tr>

             <tr>

                 <td>12345</td>

                 <td>12345</td>

             </tr>

             <tr>

                 <td>12345</td>

                 <td>12345</td>

             </tr>

         </table>

     </div>

 </body>

 </html>

如有错误，请您指正！

overflow滚动条样式设置，ie和webkit内核的更多相关文章

  1. CSS文本溢出效果&滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  2. CSS滚动条样式设置

    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...

  3. [CSS]滚动条样式设置

    概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...

  4. listview-fading 滚动条样式设置

    fadingEdge-属性用来设置拉滚动条时 ,边框渐变的方向.它有三个属性值可以设置 none:(边框颜色不变) horizontal:(水平方向颜色变淡) vertical:(垂直方向颜色变淡). ...

  5. vue 滚动条样式设置

      App.vue 文件下加入下面css   // 滚动条宽度 ::-webkit-scrollbar{   width: 6px; } /* 定义滚动条轨道 */ ::-webkit-scrollb ...

  6. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  7. CSS3自定义滚动条样式-webkit内核

    自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...

  8. CSS3自定义滚动条样式

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

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

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

随机推荐

  1. xml ,html,xhtml

    html,xhtml和xml的定义: 1.html即是超文本标记语言(Hyper Text Markup Language),是最早写网页的语言,但是由于时间早,规范不是很好,大小写混写且编码不规范: ...

  2. spring AOP详解一

    AOP是Aspect Oriented Programing的简称,面向切面编程.AOP适合于那些具有横切逻辑的应用:如性能监测,访问控制,事务管理以及日志记录.AOP将这些分散在各个业务逻辑中的代码 ...

  3. 用Navicat Premium同步表和数据

    1.选择工具 2.选择数据库 3.下一步选择表 注意:同步表的时候是先删除存在的表再创建表同步数据 SQL Server数据库转换MySQL数据库 https://blog.csdn.net/zhan ...

  4. iOS学习笔记45-Swift(五)协议

    一.Swift协议 协议是为方法.属性等定义一套规范,没有具体的实现,类似于Java中的抽象接口,它只是描述了方法或属性的骨架,而不是实现.方法和属性实现还需要通过定义类,函数和枚举完成. 1. 协议 ...

  5. 数据库操作之——key与index的区别

    mysql的key和index多少有点令人迷惑,这实际上考察对数据库体系结构的了解的. 1 key 是数据库的物理结构,它包含两层意义,一是约束(偏重于约束和规范数据库的结构完整性),二是索引(辅助查 ...

  6. AC日记——让我们异或吧 洛谷 P2420

    题目描述 异或是一种神奇的运算,大部分人把它总结成不进位加法. 在生活中…xor运算也很常见.比如,对于一个问题的回答,是为1,否为0.那么: (A是否是男生 )xor( B是否是男生)＝A和B是否能 ...

  7. Codeforces 934 C.A Twisty Movement-前缀和+后缀和+动态规划

    C. A Twisty Movement   time limit per test 1 second memory limit per test 256 megabytes input standa ...

  8. springboot2.x整合redis实现缓存（附github链接）

    本文代码已提交github:    https://github.com/LCABC777/Springboot-redis(1)Springboot中使用redis操作的两种方式:lettuce和j ...

  9. Remove Nth Node From End of List（链表,带测试代码）

    Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...

  10. SSM框架CRUD小案例

    1.数据库准备 部门tbl_dept 员工tbl_emp 建立员工和部门的外键 2.在IDEA创建SSM项目环境 2.1配置Web模块 最上面的图是错误示范,注意!!! 在Tomcat配置了项目路径, ...