CSS 底部 Tab 切換是一種常見的頁面設計形式，是實現多個選項卡切換的一種方式。通過在底部放置選項卡，不僅能夠增加頁面的美觀度，還能夠提升用戶體驗。

{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.tab-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
height: 50px;
border-radius: 5px;
overflow: hidden;
}
.tab {
flex-grow: 1;
text-align: center;
font-size: 16px;
padding: 10px;
cursor: pointer;
transition: background-color .2s ease-in-out;
}
.tab.selected {
background-color: #fff;
color: #333;
}
.tab-content {
padding: 20px;
background-color: #fff;
border-radius: 5px;
}

以上是一個簡單的 CSS 樣式代碼，實現了底部 Tab 切換的效果。其中，.tab-container 元素設置了 display: flex; ，使得選項卡能夠水平排列，并通過 justify-content 和 align-items 屬性調整位置和對齊方式。.tab 元素使用 flex-grow: 1; 屬性，根據父元素的寬度平分多個選項卡。.tab:selected 用于設置選中狀態的樣式，.tab-content 則設置了內容塊的樣式。