CSS圖片輪播是網頁設計中常見的一種效果，在頁面中循環展示多張圖片，并提供輪播控制的功能，例如向左/右滑動來切換圖片、暫停/自動播放等。使用CSS實現圖片輪播，可以減少對JavaScript的依賴，提高網頁性能和交互體驗。

<div class="slider">
<input type="radio" name="slider" id="slider1" checked>
<input type="radio" name="slider" id="slider2">
<input type="radio" name="slider" id="slider3">
<input type="radio" name="slider" id="slider4">
<ul class="slides">
<li><img src="img/slide-1.jpg"></li>
<li><img src="img/slide-2.jpg"></li>
<li><img src="img/slide-3.jpg"></li>
<li><img src="img/slide-4.jpg"></li>
</ul>
<label for="slider1"><i class="fas fa-circle"></i></label>
<label for="slider2"><i class="fas fa-circle"></i></label>
<label for="slider3"><i class="fas fa-circle"></i></label>
<label for="slider4"><i class="fas fa-circle"></i></label>
</div>
.slider {
position: relative;
width: 800px;
height: 400px;
margin: 0 auto;
}
.slides {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
list-style: none;
}
.slides li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
transition: opacity 1s ease-in-out;
}
.slides li:first-child {
opacity: 1;
z-index: 2;
}
.slider input[type=radio] {
display: none;
}
.slider label {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 2px #000;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.slider label:hover {
background: #666;
}
.slider input[type=radio]:checked ~ .slides li {
opacity: 0;
z-index: 1;
}
.slider input[type=radio]:checked ~ .slides li:first-child {
opacity: 1;
z-index: 2;
}
.slider input[type=radio]:checked ~ label {
background: #666;
}

在這個代碼塊里，我們創建了一個class名為slider的div元素，并在其中添加了四個radio和一個ul元素，分別對應圖片輪播和圖片展示。在CSS中，我們將輪播和圖片分別設為定位和透明度來實現切換的效果，通過控制radio的checked狀態和CSS中的選擇器，實現自動和手動播放的控制。