CSS3做圓形氣泡是非常常見(jiàn)的一個(gè)效果，可以用在很多地方，如頁(yè)面導(dǎo)航、輪播圖、彈窗等等。代碼非常簡(jiǎn)單，下面我們就給大家介紹一下怎樣實(shí)現(xiàn)。

.bubble {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: pink;
position: relative;
}
.bubble:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: white;
transform: translate(-50%, -50%);
}

首先，我們用CSS3的 border-radius 屬性實(shí)現(xiàn)一個(gè)圓形的氣泡。接著，我們?cè)O(shè)置氣泡的背景顏色為粉色，為了突出氣泡的效果。

下一步，我們?yōu)闅馀萏砑右粋€(gè)偽元素，在氣泡的中心添加一個(gè)白色圓心，使氣泡更加的立體感。

這樣，一個(gè)圓形氣泡就做好了，非常簡(jiǎn)單吧！當(dāng)然，如果你希望氣泡更加的生動(dòng)有趣，也可以在氣泡上選擇性的添加相應(yīng)的動(dòng)畫(huà)或效果。