CSS3在網(wǎng)頁設計中有著廣泛的運用，其中選項卡就是一個很常見的設計。

首先，我們可以使用HTML來構(gòu)建一個簡單的選項卡結(jié)構(gòu)，如下所示：

<div class="tab-container">
<ul class="menu">
<li>選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="content">
<p>選項卡1的內(nèi)容</p>
<p>選項卡2的內(nèi)容</p>
<p>選項卡3的內(nèi)容</p>
</div>
</div>

然后，我們可以使用CSS3來為選項卡添加樣式。如下代碼所示：

/* 設置選項卡容器樣式 */
.tab-container {
border: 1px solid #ccc;
}
/* 設置選項卡菜單樣式 */
.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
margin-right: 10px;
cursor: pointer;
}
.menu li.active {
background-color: #ccc;
}
/* 設置選項卡內(nèi)容樣式 */
.content {
border-top: 1px solid #ccc;
padding: 10px;
}
.content p {
display: none;
}
.content p.active {
display: block;
}

以上代碼中，我們?yōu)檫x項卡容器設置了一個邊框，并對選項卡菜單和選項卡內(nèi)容進行了樣式設置。其中，我們設置了選項卡菜單中選中的選項卡的背景色，以及選項卡內(nèi)容中被選中的選項卡的顯示方式。在這個示例中，我們使用了CSS3的display屬性來實現(xiàn)隱藏和顯示選項卡內(nèi)容。