CSS寫輪播圖小圓點是網頁開發中常用的技巧之一。通過CSS樣式設計，可以讓小圓點在輪換圖之間切換，增強頁面的視覺效果。下面我們將介紹如何使用CSS寫輪播圖小圓點代碼。

.carousel {
position: relative;
height: 500px;
width: 100%;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.carousel img.active {
opacity: 1;
}
.carousel-dots {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
}
.carousel-dot {
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #ccc;
margin: 5px;
cursor: pointer;
}
.carousel-dot.active {
background-color: #333;
}

上面代碼中，我們首先定義了一個輪播圖的容器carousel，并設置了其position屬性為relative，使得它的子元素可被position屬性為absolute的圖片元素所定位。

接下來，我們將carousel容器下的img元素，也就是輪播圖的圖片元素，都設為絕對定位，再通過給它們的opacity屬性設置為0，使得他們在頁面中不可見。同時，我們定義了一個.carousel img.active的類選擇器，使當前顯示圖片的透明度變為1，從而讓其顯示在頁面上。

然后，我們在容器下添加了一個carousel-dots div元素來顯示小圓點的容器，并在樣式中給它加上了display:flex屬性，讓它可以是flex布局，并且橫向居中顯示。同時，我們使用.carousel-dot樣式為小圓點設置公共樣式，包括高度、寬度、圓角、背景顏色和邊距。 當前顯示的小圓點指定一個.active類選擇器，并將其背景顏色設為#333，與其他小圓點區別開來。

最后，我們將HTML代碼中小圓點的數量與輪播圖片的數量一致，并通過設置當前小圓點的active類來控制輪播圖的切換。

以上就是使用CSS寫輪播圖小圓點的代碼和方法，通過簡單的CSS樣式設置可以優化網頁的視覺效果，同時增強網頁的交互性。