CSS膠囊式選項卡是一種常用的網頁設計元素，它可以方便地展示不同類型的內容。以下是一個簡單的示例：

<div class="tab">
<button class="tablinks active">第一頁</button>
<button class="tablinks">第二頁</button>
<button class="tablinks">第三頁</button>
<div class="tabcontent active">
<p>這是第一頁的內容。</p>
</div>
<div class="tabcontent">
<p>這是第二頁的內容。</p>
</div>
<div class="tabcontent">
<p>這是第三頁的內容。</p>
</div>
</div>

以上代碼包括一個包含選項卡按鈕和內容區域的div容器。每個選項卡按鈕都是一個帶有“tablinks”類的button元素，每個選項卡內容都是一個帶有“tabcontent”類的div元素。初始狀態下，“active”類被分配給第一個選項卡按鈕和內容區域。

為了使此選項卡工作，我們需要添加一些CSS。下面是一個使用Flexbox布局和偽類選擇器的示例：

.tab {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.tablinks {
margin: 10px;
padding: 10px 20px;
border: none;
background-color: #ccc;
color: #333;
font-size: 16px;
cursor: pointer;
}
.tablinks.active {
background-color: #333;
color: #fff;
}
.tabcontent {
display: none;
padding: 10px 20px;
border: 1px solid #ccc;
width: 100%;
}
.tabcontent.active {
display: block;
}

以上CSS設置選項卡容器使用Flexbox布局，使其具有響應性。選項卡按鈕具有一些基本的樣式，并帶有一個“active”類，以便我們可以針對活動選項卡進行樣式設置。選項卡內容以幾乎相同的方式設置。使用偽類選擇器，我們可以輕松地將一個選項卡的“active”類切換到另一個選項卡。

總的來說，CSS膠囊式選項卡是一種簡單但常用的網頁設計元素，這個例子可以作為一個很好的入門點，讓你了解如何創建和使用它們。