CSS选项卡是一种经常用于网站设计的UI组件，它可以帮助我们在较小的空间内展示较多内容。CSS选项卡可以使用多种方式来实现，本篇文章将介绍其中一种常见的方式——CSS多功能选项卡。

CSS多功能选项卡可以实现以下功能：

• 切换选项卡时，选项卡标题下面的下划线会随之移动。
• 选项卡的标题和下划线可以进行自定义样式。
• 选项卡内容可以进行自定义样式。
• 选项卡可以实现悬停效果。

HTML代码：
<div class="tab-container">
<ul class="tab-menu">
<li class="active">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="tab-content">
<div class="active">选项卡1内容</div>
<div>选项卡2内容</div>
<div>选项卡3内容</div>
</div>
</div>

以上是HTML代码，可以看到选项卡的标题和内容都放在了一个div标签内，选项卡内容的显示状态用active类表示，可以在CSS样式中进行设置。

CSS代码：
.tab-container {
margin: 50px auto;
max-width: 600px;
position: relative;
}
.tab-menu {
margin: 0;
padding: 0;
display: flex;
list-style: none;
justify-content: space-between;
position: relative;
z-index: 1;
}
.tab-menu li {
padding: 10px;
width: 33%;
text-align: center;
position: relative;
cursor: pointer;
}
.tab-menu li.active:after {
content: "";
display: block;
height: 3px;
background-color: #007bff;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.tab-content div {
display: none;
padding: 20px 0;
}
.tab-content div.active {
display: block;
}

在CSS样式中，我们定义了.tab-container、.tab-menu和.tab-content三个类，分别表示选项卡的容器、选项卡标题和选项卡内容。.tab-menu li.active:after是用来表示选项卡标题下面的下划线的，它使用了伪元素:after，在选项卡标题下面插入一个块中的下划线，并用css样式进行属性设置。

上面代码是实现CSS多功能选项卡的全部内容，我们可以根据需要进行修改。CSS多功能选项卡具有灵活性和可扩展性，可以通过添加或修改CSS样式来实现更多自定义功能。