CSS 圓角選項卡是一種常用的頁面設計元素，它可以增加頁面的美觀度和可讀性。在 CSS 中，我們可以利用 border-radius 屬性來實現圓角效果，同時也可以利用偽類和選擇器等技巧來實現選項卡的切換和樣式。

/* 基本選項卡樣式 */
.tab {
display: flex;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
}
.tab-item {
padding: 10px;
margin-right: 10px;
color: #333;
cursor: pointer;
}
.tab-item.active {
font-weight: bold;
background-color: #f5f5f5;
border-radius: 10px 10px 0 0;
}
/* 選項卡切換效果 */
.tab-content {
display: none;
padding: 10px;
}
.tab-item.active + .tab-content {
display: block;
}

上面的代碼實現了一個基本的選項卡樣式，選項卡的內容在 .tab-content 中，通過將它的 display 屬性設置為 none 來實現默認隱藏，然后利用相鄰兄弟選擇器 .tab-item.active + .tab-content 來實現選項卡切換時的顯示效果。 需要注意的是，為了實現圓角效果，我們在 .tab-item.active 中設置了 border-radius 屬性，并通過設置不同的值來分別處理左上、右上、左下和右下四個角。 總體來說，CSS 圓角選項卡的實現方法并不復雜，對于前端開發者來說，熟練掌握這一技巧可以讓頁面效果更加出色，同時也可以提升自己的技術水平和競爭力。