CSS圓點切換圖片是一種常見的網頁設計效果，可以用來展示圖片輪播，圖片集合等。下面我們來介紹如何使用CSS實現這個效果。

<div class="slider">
<img src="img1.jpg" alt="image1">
<img src="img2.jpg" alt="image2">
<img src="img3.jpg" alt="image3">
</div>
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>

首先我們需要一個包含需要輪播圖片的div，以及一個包含輪播圓點的div。圓點可以使用span標簽，并給第一個圓點添加active類，表示該圓點為當前顯示的圖片對應的圓點。

.slider {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
img.active {
opacity: 1;
}

接下來使用CSS將圖片定位在div中，同時設置透明度為0，使得圖片不可見。當對應的圓點被點擊時，我們可以通過為當前圓點添加active類，來控制顯示對應的圖片。同時通過設置opacity為1，來使得圖片可見。

.dots {
text-align: center;
}
.dots span {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin: 0 5px;
background-color: #ccc;
}
.dots span.active {
background-color: #555;
}

最后我們來美化圓點的樣式，同時為當前顯示的圖片對應的圓點，設置不同的樣式，以區別其他圓點。

使用以上CSS代碼，我們就可以實現CSS圓點切換圖片的效果了！