CSS是前端開(kāi)發(fā)中極為重要的技術(shù)之一，使用CSS可以美化頁(yè)面，提升用戶體驗(yàn)。在CSS中有一個(gè)常用的技巧就是在圖片上添加圓點(diǎn)，下面我們來(lái)了解一下具體方法。

img {
position: relative;
}
img::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
transform: translate(-50%, -50%);
}

以上代碼的意思是讓圖片父元素（即img）設(shè)置為相對(duì)定位，接著使用偽元素before生成一個(gè)圓點(diǎn)，為了在圖片上居中，需要使用絕對(duì)定位并設(shè)置top和left的值為50%，然后使用transform屬性將圓點(diǎn)往上往左移動(dòng)自身寬高的一半，即可在圖片上居中。

如需添加多個(gè)圓點(diǎn)，只需將上述代碼copy并粘貼，同時(shí)對(duì)top和left值進(jìn)行微調(diào)即可。

總的來(lái)說(shuō)，在圖片上添加圓點(diǎn)可以增加閱讀體驗(yàn)、引導(dǎo)用戶操作，但是過(guò)多的圓點(diǎn)可能會(huì)顯得繁瑣，應(yīng)根據(jù)實(shí)際需求合理使用。