zoukankan      html  css  js  c++  java
  • CSS3----自定义浏览器滚动条

     1.效果图

    2.源代码

    <html>
    
    <head>
        <meta charset="utf-8">
        <title>CSS3----自定义浏览器滚动条</title>
        <meta name="keyword" content="CSS3----自定义浏览器滚动条">
        <meta name="discription" content="CSS3----自定义浏览器滚动条">
        <style>
        .container {
             400px;
            height: 200px;
            overflow: auto;
            border: none;
            margin: 0 auto;
        }
    
        .box {
             400px;
            height: 400px;
            margin: 0 auto;
        }
    
        .container::-webkit-scrollbar {
            /*滚动条整体样式*/
             10px;
            height: 1px;
        }
    
        .container::-webkit-scrollbar-thumb {
            /* 滚动快  */
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #535353;
        }
    
        .container::-webkit-scrollbar-track {
            /* 轨道  */
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #EDEDED;
        }
    
        li {
            list-style-type: none;
        }
        </style>
    </head>
    
    <body>
        <div class="container">
            <ul class="box">
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
                <li>
                    <h3>SunLike阿理旺旺</h3></li>
            </ul>
        </div>
    </body>
    

    3.总结

    IE浏览器Edge,Firefox,Opera全面不支持,IE部分支持,其他浏览器都兼容

  • 相关阅读:
    最有价值的专家--微软官方网站
    CC++初学者编程教程(16) 搭建Xcode cocos2dx开发环境--尹成老师博客
    微软最具价值的专家之毛星云博客
    Winsock IO模型之IOCP模型
    IOCP模型与网络编程
    关于proc索引的创建
    查找表存在于那些proc中
    Sql 时间做条件
    Sql 无指定条件,防并发update
    sql 根据客户需用 增减查询字段
  • 原文地址:https://www.cnblogs.com/SunlikeLWL/p/8808075.html
Copyright © 2011-2022 走看看