zoukankan      html  css  js  c++  java
  • 8. 滚动条美化

    怎么改变原始丑陋的滚动条呢?

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
          body {
            overflow:scroll;
          }
          /* 针对缺省样式 (必须的) */
         ::-webkit-scrollbar {
            10px;
           height:0px;
         }
         /* 滚动条的滑轨背景颜色 */
        ::-webkit-scrollbar-track {
          background-color: gray;
          border-radius:5px;
        }
        /* 滑块颜色 */
        ::-webkit-scrollbar-thumb {
          background-color: red;
          border-radius:20px;
        }
        /*内层轨道的颜色*/
        ::-webkit-scrollbar-track-piece{
          background-color:gray;
          border-radius:5px;
        }
        /* 滑轨两头的监听按钮颜色 */
        ::-webkit-scrollbar-button {
         background-color:gray;
         0;
         height:0;
       }
       /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
       ::-webkit-scrollbar-corner {
         background-color: black;
       }
       div {
         300px;
         height:200px;
         overflow:scroll;
       }
      </style>
    </head>
    <body>
    <div>
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    ubuntu配置实验
    初始linux系统--ubuntu
    部署WSUS服务(一)
    web站点启用https (二)
    web站点启用https (一)
    windows 域的安装方法
    链表大合集(一)
    神奇的幻方
    二叉树的存储结构 以及重建二叉树
    html列表
  • 原文地址:https://www.cnblogs.com/wangrui38/p/9504658.html
Copyright © 2011-2022 走看看