在網頁設計中，頂部選項卡是一種常見的頁面布局方式，它可以幫助用戶快速地找到所需要的信息，提高網站的用戶體驗。CSS技術可以實現各種精美的頂部選項卡效果，下面我們來介紹一些常用的實現方式。

/*1. 線條動畫效果*/
.tab-list{
display:flex;
justify-content:center;
border-bottom:2px solid #333;
}
.tab-item{
margin:0 20px;
padding:10px;
color:#333;
cursor:pointer;
position:relative;
}
.tab-item::before{
content:"";
width:0;
height:2px;
position:absolute;
bottom:0;
left:0;
background-color: #0072c6;
transition:width 0.3s ease-in-out;
}
.tab-item:hover::before{
width:100%;
}
/*2. 背景圖標效果*/
.tab-list{
display:flex;
justify-content:center;
background-color:#0072c6;
}
.tab-item{
margin:0 20px;
padding:10px;
color:#fff;
cursor:pointer;
background-image:url('icon.png');
background-repeat:no-repeat;
background-position:center;
transition:background-color 0.3s ease-in-out;
}
.tab-item:hover{
background-color:rgba(255,255,255,0.3);
}
/*3. 漸變字體效果*/
.tab-list{
display:flex;
justify-content:center;
background:linear-gradient(to bottom right,#ff6f61,#6b5b95);
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
}
.tab-item{
margin:0 20px;
padding:10px;
cursor:pointer;
}

這些代碼實現了三種不同的頂部選項卡效果，分別是線條動畫效果、背景圖標效果和漸變字體效果。通過CSS精細的樣式設計，可以讓頁面的各個元素更加美觀、易于識別和用戶友好。