在網頁設計中，輪播圖是經常使用的一種元素，它可以循環展示一些圖片或者文字，吸引用戶的注意。在本文中，我們將介紹如何使用 CSS 制作一個簡單的輪播圖。

首先，我們需要一個包含多個元素的容器，用來展示圖片。我們可以使用一個 div 元素，并設置其寬度和高度為我們需要的大小。

<div class="slideshow" style="width:500px;height:300px;">
// 這里是圖片
</div>

接下來，我們需要在這個容器中添加多個圖片元素。我們可以使用 img 元素，并設置其樣式為隱藏。然后使用 CSS 給其中一個 img 元素添加一個激活樣式，用來默認顯示第一張圖片。

<div class="slideshow" style="width:500px;height:300px;">
<img src="1.jpg" alt="圖片1" class="slide" />
<img src="2.jpg" alt="圖片2" class="slide" style="display:none;" />
<img src="3.jpg" alt="圖片3" class="slide" style="display:none;" />
</div>

接下來，我們需要在 CSS 中設置激活樣式的樣式。我們可以使用 display 屬性來控制元素是否顯示，opacity 屬性來控制元素的透明度。我們可以將激活元素顯示出來并設置透明度為 1，其他元素隱藏并設置透明度為 0，這樣就可以實現輪播圖的效果。

.slide.active {
display: block;
opacity: 1;
}
.slide {
display: none;
opacity: 0;
transition: opacity 1s;
}

最后，我們需要使用 JavaScript 來實現輪播圖的自動切換功能。我們可以使用 setInterval 函數來設置定時器，每隔一段時間就切換到下一張圖片。在切換圖片時，我們需要先將當前激活的圖片的樣式取消，并給下一張圖片添加激活樣式。

let slideshow = document.querySelector('.slideshow');
let slides = slideshow.querySelectorAll('.slide');
let currentSlide = 0;
let slideInterval = setInterval(nextSlide, 3000);
function nextSlide() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
}

至此，我們已經實現了一個簡單的輪播圖。你可以繼續優化它，例如添加左右箭頭控制圖片切換、添加分頁指示器等。