在網頁設計中，輪播圖是非常常見的一種展示方式，它可以將多張圖片以輪播的形式展示給用戶，讓用戶在不同的時間看到不同的圖片。那么，如何在CSS中設置輪播圖呢？

首先，我們需要準備好需要輪播的圖片。可以將圖片放在一個div中，并為這個div設置一個class。例如：

<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>

然后，我們需要使用CSS為這個div設置樣式，使其可以實現輪播效果。具體的代碼如下：

.slider {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.slider img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img.active {
opacity: 1;
z-index: 1;
}

上面的代碼中，我們給slider類設置了一些樣式，使其可以實現輪播效果。其中，position: relative和overflow: hidden用于設置父元素的定位和溢出方式，height: 400px用于設置輪播圖的高度。

接下來，我們需要為輪播圖中的每張圖片設置樣式。我們將每張圖片設置為絕對定位，并將其重疊在一起。將opacity設置為0，表示圖片初始時是不可見的。transition屬性用于設置圖片的過渡效果。

最后，我們給輪播圖中的第一張圖片設置active類，使其在頁面加載時可以顯示出來。然后，我們使用JavaScript來控制圖片的輪播。

整個CSS樣式代碼如下：

.slider {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.slider img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img.active {
opacity: 1;
z-index: 1;
}

在JavaScript中，我們可以使用setInterval函數來輪播圖片。具體的代碼如下：

var sliderImages = document.querySelectorAll('.slider img');
var currentImage = 0;
var slideInterval = setInterval(nextSlide, 2000);
function nextSlide() {
sliderImages[currentImage].className = ' ';
currentImage = (currentImage + 1) % sliderImages.length;
sliderImages[currentImage].className = 'active';
}

上面的代碼中，我們首先獲取所有的輪播圖片，并設置currentImage變量為0。然后，我們使用setInterval函數來執行nextSlide函數，實現圖片的自動輪播。在nextSlide函數中，我們將當前的圖片的class設置為空，將currentImage改為下一張圖片的索引，并將該圖片的class設置為active，實現圖片的切換。

以上就是如何在CSS中設置輪播圖的方法，使用setInterval函數和CSS3的過渡效果可以讓我們實現一個簡單的輪播圖。