CSS標簽欄是網頁設計中常見的一種設計元素，可以用來分割網頁內容、輔助導航等。以下是如何使用CSS來創建自己的標簽欄。

/* 標簽欄的樣式 */
.nav-tabs{
display: flex;
justify-content: space-between;
list-style-type: none;
background-color: #ddd;
padding: 0.5rem;
}
/* 選項卡的樣式 */
.nav-tabs li{
flex-basis: 0;
flex-grow: 1;
text-align: center;
margin-right: 0.5rem;
border-radius: 0.25rem 0.25rem 0 0;
background-color: #eee;
padding: 0.75rem 1rem;
cursor: pointer;
}
/* 選中的標簽 */
.nav-tabs li.active{
background-color: #fff;
border-bottom: 3px solid #007bff;
}
/* 標簽欄中的內容 */
.tab-content{
padding: 1rem;
background-color: #fff;
border-radius: 0 0.25rem 0.25rem 0.25rem;
border: 1px solid #ddd;
}
/* 顯示選中的內容 */
.tab-content >div{
display: none; 
}
.tab-content >.active{
display: block;
}

在HTML中，標簽欄和標簽內容可以這樣定義：

<div class="nav-tabs">
<ul>
<li class="active">選項1</li>
<li>選項2</li>
<li>選項3</li>
</ul>
</div>
<div class="tab-content">
<div class="active">
<p>這是選項1的內容</p>
</div>
<div>
<p>這是選項2的內容</p>
</div>
<div>
<p>這是選項3的內容</p>
</div>
</div>

上述CSS代碼將顯示一個具有選項卡和內容框的標簽欄。選項卡將具有灰色背景和白色字體，并將在選擇時顯示藍色底部邊框。內容將在默認情況下隱藏，并且當選項卡被單擊時將顯示相應的內容。