在Web頁面制作中，圖片輪播效果是非常常見的一種設計。為了讓這種效果更加生動和高效，我們通常會在輪播圖下方添加一行小圓球，來告訴用戶當前輪播到了哪一張圖片。而這些小圓球的制作，依靠的就是CSS技術。

.carousel{
position:relative;
height:500px;
}
.img-list{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
}
.img-item{
flex:1;
height:100%;
transition: all .5s ease-in-out;
}
.show{
opacity:1;
z-index:1;
}
.hidden{
opacity:0;
z-index:0;
}
.dot-list{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
display:flex;
}
.dot-item{
width:10px;
height:10px;
border-radius:50%;
background-color:#ccc;
margin:0 10px;
cursor:pointer;
}
.dot-active{
background-color:#333;
}

上面的代碼是一個簡單的圖片輪播效果，其中我們主要關心的是小圓球的制作部分：

.dot-list{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
display:flex;
}
.dot-item{
width:10px;
height:10px;
border-radius:50%;
background-color:#ccc;
margin:0 10px;
cursor:pointer;
}
.dot-active{
background-color:#333;
}

首先，我們在輪播圖組件的下方添加了一個名為".dot-list"的元素，用于存放小圓球。接著，我們將這個小圓球列表使用"position:absolute;"方式，放置到了輪播圖底部，同時使用"left:50%;transform:translateX(-50%);"方法使其水平居中對齊。然后我們使用"display:flex;"方法來對小圓球進行排列。

對于每個小圓球的樣式，我們使用了".dot-item"來進行定位和修飾，同時將其大小改為"10px * 10px"，圓角設置為"50%"，背景設置為"#ccc"。最后加上鼠標懸停效果，用".dot-active"來變更圓球的背景顏色即可。

至此，我們完成了關于CSS鏈接輪播小圓球的制作。以上的代碼可以適用于大多數的Web頁面制作，同時也可以讓我們更加深入的了解CSS技術創造出無限想象力的可能性。