02.09 选项卡及自定义滚动条

2019-11-02 18:22:11

字体：大中小

来源：转载

供稿：网友

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/ .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结构

这里写图片描述