隨著移動互聯網的快速發展，手機已經成為每個人必不可少的工具之一，而手機選項卡的css樣式也越來越受到網站設計師的關注。下面我們一起來了解一下手機選項卡的css樣式。

/* 選項卡樣式 */
.tab{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
height: 40px;
background-color: #fff;
border-bottom: 1px solid #ebebeb;
 }
.tab-item{
width: 25%;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: #333;
}
.tab-item.active{
background-color: #f5f5f5;
color: #ff6262;
}
/* 內容樣式 */
.tab-content{
display: none;
}
.tab-content.active{
display: block;
}

以上是一個基本的手機選項卡樣式。首先設置了一個.tab類，用來包裹選項卡中的.tab-item，使用flex布局，并設置每個.tab-item的寬度為25%。然后使用一個.active類用于表示當前選項卡的狀態，包括.tab-item和.tab-content。

另外需要注意的是，我們設置了默認狀態下.tab-content的display為none，這是為了讓初始頁面不顯示選項卡的內容。而當某個選項卡被選中時，我們使用tab-item的.active類去激活對應的.tab-content。

在實際開發中，我們也可以根據實際需求對選項卡樣式進行更改和調整，比如修改選項卡的顏色、字體大小等等。通過靈活運用css技巧，我們可以創造出更加美觀、易用的手機選項卡效果。