CSS圖片上下輪播是一種常見的網頁效果，具有循環播放、自動觸發、響應式布局等特點。下面我們來介紹如何使用CSS制作一種簡單的圖片上下輪播效果。

步驟：

1. HTML：在HTML中定義一個容器div，使用img標簽插入需要輪播的圖片，并設置每張圖片的高度和寬度。
2. CSS：為div容器設置顯示區域和位置。為了實現圖片輪播的效果，我們可以設置div的overflow為hidden，以便裁剪超出部分。使用position屬性設置容器的位置，后續設置圖片的移動效果也會用到。
3. 動畫：通過CSS3實現圖片的移動效果。我們可以使用@keyframes定義動畫的關鍵幀，再通過animation屬性調用定義好的動畫。
4. JS：在JS中為div容器添加一個定時器，以控制圖片的自動輪播。

代碼示例：

HTML代碼：
<div class="slider">
<img src="img1.jpg" style="width:100%;height:300px;">
<img src="img2.jpg" style="width:100%;height:300px;">
<img src="img3.jpg" style="width:100%;height:300px;">
<img src="img4.jpg" style="width:100%;height:300px;">
<img src="img5.jpg" style="width:100%;height:300px;">
</div>
CSS代碼：
.slider {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
animation: slide 5s infinite;
}
@keyframes slide {
from {top: 0;}
to {top: -1500px;}
}
JS代碼：
var timer = setInterval(function() {
var slider = document.querySelector('.slider');
var firstImg = slider.querySelector('img');
var height = firstImg.offsetHeight;
slider.style.transform = 'translateY(-' + height + 'px)';
setTimeout(function() {
slider.appendChild(firstImg);
slider.style.transform = 'translateY(0)';
}, 2000);
}, 3000);

以上就是使用CSS制作圖片上下輪播的方法。您可以根據您的實際需求做出一些微調，比如修改容器的寬度、高度，設置動畫的時間等。