選項卡是網(wǎng)站中常用的交互元素之一，而圓角選項卡能給網(wǎng)站帶來更友好、現(xiàn)代的視覺效果。在 CSS 中，我們可以利用 border-radius 屬性實現(xiàn)圓角選項卡。以下是實現(xiàn)的代碼：

/* 圓角選項卡 */.tab {  display: flex;  background-color: #fff;}.tab >div {  flex: 1;  text-align: center;  padding: 12px 20px;  cursor: pointer;  border-top-left-radius: 8px;  border-top-right-radius: 8px;}.tab >div.active {  background-color: #f5f5f5;  border-bottom: 2px solid #2196f3;  border-radius: 8px 8px 0 0;}

代碼中，我們創(chuàng)建了一個類名叫做 “tab” 的容器，并設(shè)置了容器的背景色為白色。在容器內(nèi)部，我們創(chuàng)建了多個選項卡的內(nèi)容 div，通過 flex 布局使其水平排列。每個選項卡內(nèi)容 div 的樣式設(shè)置了一些常用的樣式屬性，例如文字居中、鼠標(biāo)懸停的時候顯示手指狀的光標(biāo)等等。通過 border-top-left-radius 和 border-top-right-radius 屬性，我們?yōu)槊總€選項卡的頂部兩個角設(shè)置了圓角效果。

當(dāng)選項卡被點擊的時候，我們?yōu)槠涮砑恿祟惷?“active”，使其背景色變?yōu)榛疑⒃诘撞刻砑恿艘粭l高亮的邊框，以及將底部兩條邊的圓角樣式設(shè)置為 0，從而實現(xiàn)了與其他選項卡分離的效果。

使用 CSS 實現(xiàn)圓角選項卡不僅能給網(wǎng)站帶來更友好、現(xiàn)代的視覺效果，還能提高用戶的交互體驗。通過對樣式的優(yōu)化，我們可以讓用戶更容易地找到自己想要的內(nèi)容，從而提高網(wǎng)站的用戶體驗和頁面訪問量。