在網頁設計中，輪播圖是非常常見的一個元素。它可以向用戶展示多張圖片或內容，并且通過自動播放或手動切換的方式，吸引用戶的注意力并提高頁面的交互性。在CSS中，我們可以使用多種方式實現輪播圖的效果，其中最常見的是使用CSS動畫。

/*HTML結構*/
<div class="carousel">
<div class="carousel-inner">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<button class="carousel-prev"></button>
<button class="carousel-next"></button>
</div>
/*CSS樣式*/
.carousel{
position:relative;
}
.carousel-inner{
position:relative;
width:100%;
height:400px;
overflow:hidden;
}
.carousel-inner img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition:opacity .5s ease-in-out;
}
.carousel-inner img:first-child{
opacity:1;
}
.carousel-prev,.carousel-next{
position:absolute;
top:50%;
transform:translateY(-50%);
width:20px;
height:20px;
border-radius:50%;
background-color:rgba(0,0,0,.5);
border:none;
outline:none;
cursor:pointer;
}
.carousel-prev{
left:20px;
}
.carousel-next{
right:20px;
}
.carousel-prev:before,.carousel-next:before{
content:"";
display:block;
width:10px;
height:10px;
border-top:2px solid white;
border-right:2px solid white;
transform:rotate(-45deg);
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.carousel-next:before{
transform:rotate(135deg);
}
/*JS代碼*/
var index=0;
var timer=setInterval(function(){
index++;
if(index>=$('.carousel-inner img').length){
index=0;
}
showImage(index);
},2000);
function showImage(index){
$('.carousel-inner img').eq(index).css('opacity',1).siblings().css('opacity',0);
}
$('.carousel-prev').click(function(){
index--;
if(index<0){
index=$('.carousel-inner img').length-1;
}
showImage(index);
});
$('.carousel-next').click(function(){
index++;
if(index>=$('.carousel-inner img').length){
index=0;
}
showImage(index);
});

以上代碼實現了一個基本的CSS多圖輪播圖效果。其中，HTML結構包括一個大容器.carousel，一個圖片展示容器.carousel-inner和兩個切換按鈕.carousel-prev和.carousel-next。CSS樣式中，我們設置了.carousel-inner為相對定位，并且設置了它的寬度為100%、高度為400px、overflow為hidden。這樣，圖片在.carousel-inner容器中的位置就可以通過調整其position和top/left屬性來實現。同時，我們將.carousel-inner中的所有img設置為絕對定位，并且通過opacity屬性來控制它們的顯示和隱藏。在.carousel-inner(img:first-child)中，我們將第一張圖片的opacity設置為1，讓它默認顯示。切換按鈕.carousel-prev和.carousel-next的樣式主要包括了它們的位置、大小、顏色和箭頭等。最后，我們結合JavaScript的定時器和點擊事件來控制圖片展示的切換。

以上就是基本的CSS多圖輪播圖實現方式，你可以根據實際需求進行調整和優化。另外，還可以使用CSS框架或第三方插件等方式來實現更豐富、更復雜的輪播圖效果，希望本文對你有所幫助！