CSS制作切換選項卡是Web開發中比較常見的一種技術，它可以讓頁面在不刷新的情況下動態地展示不同的內容。下面介紹一下如何使用CSS制作切換選項卡。

HTML代碼如下：
<div class="tab-box">
<ul class="tab-header">
<li class="tab-active">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="tab-body">
<div class="tab-content">這是選項卡1的內容</div>
<div class="tab-content">這是選項卡2的內容</div>
<div class="tab-content">這是選項卡3的內容</div>
</div>
</div>
CSS代碼如下：
<style>
.tab-box {
border: 1px solid #ccc;
display: flex;
flex-direction: column;
width: 300px;
}
.tab-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.tab-header li {
cursor: pointer;
font-weight: bold;
list-style: none;
}
.tab-active {
color: red;
border-bottom: 2px solid red;
}
.tab-body {
padding: 10px;
}
.tab-content {
display: none;
}
.tab-active ~ .tab-content {
display: block;
}
</style>
上面代碼中，首先定義了一個.tab-box的容器，包含一個.tab-header選項卡頭和一個.tab-body選項卡內容區。.tab-header下面包含了三個選項卡，其中第一個選項卡添加一個.tab-active樣式表示默認選中。.tab-body下面放置了三個選項卡內容，每個選項卡內容都有一個.tab-content樣式表示隱藏。
接下來的CSS代碼實現了選項卡的切換效果。通過設置.tab-active樣式的樣式，鼠標懸停到選項卡上面時，選項卡文本的顏色和下劃線變成紅色，同時.tab-active ~ .tab-content的樣式使得選項卡內容區只會顯示被激活的選項卡內容。