02.09 选项卡及自定义滚动条_选项卡的滚动条宽度-优快云博客

本文链接：https://blog.youkuaiyun.com/wupd2014/article/details/54948999

本文介绍如何使用CSS3自定义滚动条样式，包括设置滚动条的宽高、背景颜色、轨道颜色和滑块颜色等。此外，还展示了如何通过CSS实现导航栏的圆角效果和选中状态样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
        .scrollbar::-webkit-scrollbar
        {
            width: 10px;
            height: 16px;
            background-color: #f5f5f5;
            border-radius: 10px;
        }
        /*定义滚动条的轨道，内阴影及圆角*/
        .scrollbar::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            border-radius: 10px;
            background-color: #004882;
        }
        /*定义滑块，内阴影及圆角*/
        .scrollbar::-webkit-scrollbar-thumb
        {
            /*width: 10px;*/
            height: 20px;
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #1875D8;
        }
        #tablelist ul.tab-hd li:last-child, .bar4map .scTab li:last-child
        {
            -moz-border-top-right-radius: 3px;
            -o-border-top-right-radius: 3px;
            -webkit-border-top-right-radius: 3px;
            border-top-right-radius: 3px;
            -moz-border-bottom-right-radius: 3px;
            -o-border-bottom-right-radius: 3px;
            -webkit-border-bottom-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }
        #tablelist ul.tab-hd li:first-child, .bar4map .scTab li:first-child
        {
            -moz-border-top-left-radius: 3px;
            -o-border-top-left-radius: 3px;
            -webkit-border-top-left-radius: 3px;
            border-top-left-radius: 3px;
            -moz-border-bottom-left-radius: 3px;
            -o-border-bottom-left-radius: 3px;
            -webkit-border-bottom-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }
        .bar4map .scTab li
        {
            /*float: left;*/
            display: inline-block;
            height: 25px;
            line-height: 26px;
            width: 70px;
            margin-right: -1px;
            text-align: center;
            color: #ddd;
            border: 1px solid #1f74f2;
        }
        .bar4map .scTab li.curr
        {
            background: #1f74f2;
            color: #fff;
        }

Html结构

<div class="bar4map" id="auto_gsid_19">
        <ul class="scTab" id="scTab">
            <li class="scLi curr" tabval="3" onclick="change(3)">第三批</li>
            <li class="scLi" tabval="4" onclick="change(4)">第四批</li>
            <li class="scLi" tabval="5" onclick="change(5)">第五批</li>
       </ul>
</div>