在前端開發中，常常需要使用圓點來裝飾頁面或者進行標識，而使用div元素實現圓點是一種常見的方式。div元素是HTML中最基本的塊級元素，通過一些CSS樣式的設置，我們可以用div元素來繪制出漂亮的圓點。

下面將通過幾個代碼案例來詳細解釋如何使用div元素實現圓點效果：

案例一：使用CSS樣式設置div的大小和背景顏色

<div style="width: 10px; height: 10px; background-color: #999; border-radius: 50%;"></div>

通過設置div的寬度、高度、背景顏色和邊框圓角屬性，我們可以將一個正方形的div變成一個圓形的圓點。

案例二：使用CSS的偽元素before來生成圓點

<style>
.dot {
position: relative;
width: 10px;
height: 10px;
background-color: #999;
border-radius: 50%;
}
<br>
.dot::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 50%;
}
</style>
<br>
<div class="dot"></div>

通過使用CSS的偽元素before，我們可以在div中生成一個小一點的白色圓點，從而實現圓形的效果。

案例三：使用CSS的box-shadow屬性實現立體的圓點效果

<style>
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #999;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
</style>
<br>
<div class="dot"></div>

通過使用CSS的box-shadow屬性，我們可以給圓點添加一層陰影效果，從而使得圓點看起來更加立體。

通過上述幾個代碼案例，我們可以看到，使用div元素實現圓點效果非常簡單且靈活。我們可以根據實際需求，通過調整div的大小、背景顏色、邊框圓角以及添加陰影等CSS屬性，來實現各種不同樣式的圓點，從而增加頁面的美觀性。