02.09 選項卡及自定義滾動條

2024-04-27 15:18:16

字體：大中小

來源：轉載

供稿：網友

/*定義滾動條寬高及背景，寬高分別對應橫豎滾動條的尺寸*/ .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結構

這里寫圖片描述