zoukankan      html  css  js  c++  java
  • overflow滚动条样式设置,ie和webkit内核

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     
     7     <style>
     8         body{
     9             /*ie下修改滚动条样式,在webkit内核浏览器无效*/
    10             /*scrollbar-arrow-color: #f4ae21;三角箭头的颜色 
    11             scrollbar-face-color: #333; *立体滚动条的颜色
    12             scrollbar-3dlight-color: #666; 立体滚动条亮边的颜色
    13             scrollbar-highlight-color: #666; 滚动条空白部分的颜色
    14             scrollbar-shadow-color: #999; 立体滚动条阴影的颜色 
    15             scrollbar-darkshadow-color: #666; 立体滚动条强阴影的颜色 
    16             scrollbar-track-color: #666; 立体滚动条背景颜色
    17             scrollbar-base-color:#f8f8f8; 滚动条的基本颜色
    18             Cursor:url(mouse.cur);自定义个性鼠标*/
    19         }
    20         div{
    21             height:100px;
    22             200px;
    23             overflow:auto;
    24         }
    25         td{
    26             display:inline-block;
    27             margin:10px 20px;
    28         }
    29         /*webkit内核浏览器修改滚动条样式*/
    30         ::-webkit-scrollbar {  
    31              8px;  
    32         }  
    33         ::-webkit-scrollbar-thumb {  
    34             border-radius: 10px;  
    35             background: rgba(0,0,0,0.2);   
    36         }  
    37         ::-moz-scrollbar {  
    38              8px;  
    39         }  
    40         ::-moz-scrollbar-thumb {  
    41             border-radius: 10px;  
    42             background: rgba(0,0,0,0.2);   
    43         }  
    44         /*当前窗口未激活的情况下*/ 
    45         ::-webkit-scrollbar-thumb:window-inactive {  
    46             background: rgba(0,0,0,0.1);   
    47         }  
    48         /*hover到滚动条上*/  
    49         ::-webkit-scrollbar-thumb:vertical:hover{  
    50             background-color: rgba(0,0,0,0.3);  
    51         }  
    52         /*滚动条按下*/  
    53         ::-webkit-scrollbar-thumb:vertical:active{  
    54             background-color: rgba(0,0,0,0.7);  
    55         }  
    56     </style>
    57 </head>
    58 <body>
    59     <div>
    60         <table>
    61             <tr>
    62                 <td>12345</td>
    63                 <td>12345</td>
    64             </tr>
    65             <tr>
    66                 <td>12345</td>
    67                 <td>12345</td>
    68             </tr>
    69             <tr>
    70                 <td>12345</td>
    71                 <td>12345</td>
    72             </tr>
    73             <tr>
    74                 <td>12345</td>
    75                 <td>12345</td>
    76             </tr>
    77         </table>
    78     </div>
    79 </body>
    80 </html>

    如有错误,请您指正!

  • 相关阅读:
    vue中的 computed 和 watch 的区别
    mysql8.0 初始化数据库及表名大小写问题
    sql server alwayson 调整数据文件路径
    zabbix 自定义监控 SQL Server
    mysql 创建用户及授权
    mysql 设置从库只读模式
    mysql8.0 主从复制安装及配置
    centos8.0安装mysql8.0
    centos8替换阿里数据源
    npm publish 报错 【you or one of your dependencies are requesting a package version that is forbidden by your security policy】
  • 原文地址:https://www.cnblogs.com/ksl666/p/6553014.html
Copyright © 2011-2022 走看看