CSS中的圖片輪播是網頁設計中經常使用的效果之一，可以循環展示一組圖片，并支持手動或自動切換。下面我們就來看一下如何實現一個基礎的圖片輪播：

/*HTML結構*/
<div class="carousel">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
</div>
/*CSS樣式*/
.carousel {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.carousel img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.carousel img:first-child {
opacity: 1;
}
/*自動切換效果*/
.carousel img:first-child {
animation: mycarousel 5s ease-in-out infinite;
}
@keyframes mycarousel {
0% {opacity: 1;}
25% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 1;}
}

以上代碼中，我們使用了CSS的位置、大小、透明度、動畫等屬性，通過順序地控制圖片的顯示和隱藏，實現了圖片的輪播效果。

同時，我們也使用了CSS3提供的動畫效果，通過關鍵幀的設置與時間函數的選擇，控制圖片在一定時間內從可見到不可見，再從不可見到可見的切換，從而體現了自動切換的效果。

當然，我們也可以通過JavaScript對輪播時序和控制方式進行更加精細的配置，如添加按鈕控制、鼠標懸停暫停、緩動函數等。

總之，CSS中的圖片輪播是通過復雜的層疊與過渡效果，實現了簡潔優雅的頁面設計效果，既方便又美觀。