在網頁上，圖片輪播是一種常見的實現動態效果的方法，而無縫輪播是為了增強用戶體驗的關鍵。下面將介紹如何使用 CSS 實現圖片的上下輪播無縫效果。

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

以上是一個基本的 HTML 結構，我們將圖片都放在一個 div 中，并添加類名為 slider。接下來的 CSS 代碼中，首先設置 slider 的高度和寬度，讓其中的圖片全都鋪滿。

.slider {
height: 400px;
width: 600px;
overflow: hidden;
position: relative;
}
.slider img {
height: 400px;
width: 600px;
position: absolute;
}

接下來，我們利用 CSS3 的動畫效果，讓圖片移動。我們設置每張圖片向上移動 100% ，在 3 秒鐘內完成。為了達到無縫輪播的效果，我們需要設置最后一張圖和第一張圖的間隔為 0 。

@keyframes slide {
from {top: 0;}
to {top: -100%;}
}
.slider img:nth-child(1) {
animation: slide 3s infinite;
}
.slider img:nth-child(2) {
animation: slide 3s infinite 1s;
}
.slider img:nth-child(3) {
animation: slide 3s infinite 2s;
}
.slider img:nth-child(4) {
animation: slide 3s infinite 3s;
top: 100%;
}

在上面的 CSS 代碼中，我們使用 nth-child 選擇器分別給每張圖片設置不同的動畫延遲，同時設置最后一張圖片的 top 為 100% ，使其輪播回到第一張圖片時不會有斷層。

最后，完整的 HTML 和 CSS 代碼如下：

<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image1.jpg">
</div>
.slider {
height: 400px;
width: 600px;
overflow: hidden;
position: relative;
}
.slider img {
height: 400px;
width: 600px;
position: absolute;
}
@keyframes slide {
from {top: 0;}
to {top: -100%;}
}
.slider img:nth-child(1) {
animation: slide 3s infinite;
}
.slider img:nth-child(2) {
animation: slide 3s infinite 1s;
}
.slider img:nth-child(3) {
animation: slide 3s infinite 2s;
}
.slider img:nth-child(4) {
animation: slide 3s infinite 3s;
top: 100%;
}

以上便是使用 CSS 實現圖片上下輪播無縫效果的方法，應用于網頁中，可以有效增強用戶體驗。