CSS滾動選項卡是網站設計中常用的一種樣式。它可以用來展示多個選項卡內容，防止頁面過長。本文將介紹如何使用CSS滾動選項卡。

/* tab樣式 */
.tab {
display: flex;
overflow-x: auto; /* 橫向滾動 */
white-space: nowrap; /* 禁止換行 */
}
.tab a {
display: inline-block;
padding: 10px;
margin-right: 10px;
text-decoration: none;
color: #333;
border-bottom: 2px solid transparent;
}
.tab a:hover {
border-bottom: 2px solid #333;
}
/* 內容樣式 */
.content {
width: 100%;
white-space: normal; /* 允許換行 */
overflow: hidden; /* 隱藏內容 */
position: relative;
}
.content .item {
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0; /* 隱藏內容 */
transition: opacity 0.3s;
}
.content .item.active {
opacity: 1; /* 顯示內容 */
}

首先，我們要創建一個類名為"tab"的容器，使用"overflow-x: auto"來實現橫向滾動，"white-space: nowrap"禁止換行，并使用Flex布局使內容水平排列。

接下來，在"tab"容器內創建多個標簽，每個標簽代表一個選項卡。用CSS修飾樣式，包括padding、margin、text-decoration、color等。同時設置一個:hover樣式，當鼠標懸停在選項卡上時，會顯示一個2px的黑色下劃線。

然后，我們再創建一個類名為“content”的容器，用于存放選項卡的內容。首先設置容器的寬度為100% ，設置white-space為normal，以允許溢出內容換行。同時，將overflow屬性設置為hidden，以便在其他選項卡被隱藏時，只顯示當前選項卡的內容。我們還需要將每個選項卡內容的opacity屬性設置為0，以便初始時隱藏內容。

最后，我們在每個選項卡的內容上添加了一個類名為“item”，并為每個選項卡的內容添加了一個“active”類名，以便在當前選項卡被選中時，將該內容可見。當選項卡被點擊時，我們將使用JavaScript方法，通過添加和刪除“active”類的方式，切換選項卡和對應的內容的可見性。