CSS幻燈片圓點是一種常用的導航指示器，用于顯示幻燈片的當前位置。

在HTML中創建幻燈片，可以使用以下代碼：

<div class="slider">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>

在CSS中，我們可以使用偽元素來創建幻燈片圓點，代碼如下：

.slider {
position: relative;
}
.slider:before {
content: "";
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.slider:before >span {
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background: #fff;
cursor: pointer;
transition: background 0.3s ease;
}
.slider:before >span.active {
background: #666;
}

在這個例子中，我們使用:before偽元素來創建裝飾物，并使用flexbox布局在容器的右下角定位了它們。每個圓點使用了50%的弧度圓形來呈現。每個圓點均使用了hover和active樣式定義，鼠標懸停時將更改背景顏色，active圓點將突出顯示幻燈片。

最后，在JavaScript中，我們可以輕松地將為每個圓點添加事件偵聽器，并在用戶與幻燈片交互時更改幻燈片的位置。

幻燈片圓點是瀏覽器中常見的UI元素之一，它提供了方便的導航，使用戶可以在幻燈片中自由瀏覽。