<!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. Python生成器、三元表达式、列表生成式、字典生成式、生成器表达式

    什么是生成器:只要函数内部包含有yield关键字,那么函数名()的到的结果(生成器地址)就是生成器,再调用函数不会执行函数内部代码这个生成器本身有  _iter_  he  _next_功能(即生成器 ...

  2. sqlserver数据库的权限设置

    1.先用Windows账户登陆,然后在安全性中添加用户--SQL server 身份验证,用户名,密码2.用户映射--勾选对应的数据库--数据库角色成员身份--db_owner public

  3. 多元线性回归(pandas/scikit-learn)

    import pandas as pd from sklearn.cross_validation import train_test_split from sklearn.linear_model ...

  4. xampp下bugfree部署

    以Bugfree3.0.4为例,讲解如何搭建LAMP架构的Web服务器. Bugfree是一个XAMPP架构的网站,XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的搭建XAMP ...

  5. kb-07-RMQ线段树--07（动态规划）

    RMQ是一类解决区间最值查询的算法的通称:.一共有四类:在代码中有说明: 下面是ST算法,就是动态规划做法: 来看一下ST算法是怎么实现的(以最大值为例): 首先是预处理,用一个DP解决.设a是要求区 ...

  6. BZOJ 4554 [Tjoi2016&Heoi2016]游戏 ——二分图

    出原题,直接二分图匹配即可. #include <cstdio> #include <vector> #include <cstring> using namesp ...

  7. windows10下安装ubuntu16.04 双系统

    软件和材料:   UltraISO .ubuntu16.04镜像.U盘 步骤: 1.先在windows10 上下载UltraISO并安装 2.打开UltraISO,插入优盘,制作ubuntu160.4 ...

  8. 2018.7.31 Noip2018模拟测试赛（十六）

     日期: 七月最后一天  总分: 300分  难度: 提高 ~ 省选  得分: 30分(少的可怜) 我太弱了:(题目目录) T1:Mushroom追妹纸 T2:抵制克苏恩 T3:美味 失分分析:(QA ...

  9. 容器 What, Why, How

    学习任何东西都可以按照3W的框架进行,容器技术也是一样,先回答 What.Why 和 How 这三个问题. What - 什么是容器? 容器是一种轻量级.可移植.自包含的软件打包技术,使应用程序可以在 ...

  10. 【CF1023B】Pair of Toys（解方程）

    题意:给定n个玩具要你选出两个玩具求出k的价值,第i个玩具的价值为i.若是没有选择方案,输出0 补充:玩具A与玩具B 和 玩具B和玩具A 是同一种选择 n,k<=1e14 思路:列出式子,解不等 ...