CSS3選項卡樣式是Web開發中常用的一種樣式，它能夠為網頁增加交互性和美觀性。下面我們來學習一下如何使用CSS3實現選項卡效果。

.tab-header {
display: flex; /* 創建彈性容器 */
}
.tab-header button {
padding: 10px; /* 設置內邊距 */
border: none; /* 去除邊框 */
background-color: #eee; /* 設置背景色 */
cursor: pointer; /* 設置光標樣式 */
}
.tab-header button.active {
background-color: #ccc; /* 設置選中的按鈕背景色 */
}
.tab-content {
display: none; /* 默認隱藏內容 */
}
.tab-content.active {
display: block; /* 顯示選中的內容 */
}

以上是一個基礎的選項卡樣式代碼。首先，我們定義了一個包含所有選項卡按鈕的容器，使用flex布局，使其自適應寬度。然后，設置按鈕的樣式，包括內邊距、背景色和光標樣式。

接著，我們為選中的按鈕設置一個.active類，用于表示選中狀態。在這個類中，我們將選中按鈕的背景色設置為另一個顏色，以明顯區別于未選中狀態。

對于選項卡內容的部分，我們默認將其隱藏起來，使用.display: none;設置。當用戶點擊某一個選項卡按鈕時，我們通過JavaScript將其對應的內容區域展示出來，使用.display: block;達到顯示效果。

除了這個基礎的選項卡樣式外，我們還可以通過CSS3的樣式擴展來實現更多的效果，如動畫過渡效果、按鈕點擊反饋效果等。在實際開發過程中，可以根據需要靈活運用。