CSS3圖片選擇欄可以讓網站的視覺效果更加優美，提高用戶體驗度。讓我們來看看如何使用CSS3圖片選擇欄，制作一個漂亮的選擇欄。

<div class="pic-nav">
<a href="#" class="active"><img src="pic/1.jpg"></a>
<a href="#"><img src="pic/2.jpg"></a>
<a href="#"><img src="pic/3.jpg"></a>
<a href="#"><img src="pic/4.jpg"></a>
</div>

以上為HTML結構代碼，創建了一個class為pic-nav的div，并在其中嵌套了四個a標簽。每個a標簽內部包含一張圖片以及一個鏈接。 代碼中class為active的a標簽是當前選項卡，其它選項卡則去掉active class。

.pic-nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
text-align: center;
}
.pic-nav a {
margin: 0 20px;
display: block;
width: 100px;
height: 50px;
position: relative;
}
.pic-nav a img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
.pic-nav a.active img {
opacity: 1;
}
.pic-nav a:hover img {
opacity: 1;
}
.pic-nav a.active {
border: 1px solid #ddd;
}

以上為CSS樣式代碼，設定了pic-nav div的位置、樣式，讓圖片選擇欄居中并排列整齊。設定了a標簽的大小、位置，圖片以及選項卡樣式的過渡效果。active樣式定義了當前選項卡的樣式。這個效果非常簡單，但是實現了圖片選擇欄需要的全部基本功能。