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代码将显示一个具有选项卡和内容框的标签栏。选项卡将具有灰色背景和白色字体，并将在选择时显示蓝色底部边框。内容将在默认情况下隐藏，并且当选项卡被单击时将显示相应的内容。