在網(wǎng)頁設計中，氣泡是一種常見的效果。下面我們來介紹如何利用 CSS 畫出一個漂亮的氣泡形狀。

.bubble {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: green;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.bubble:before {
position: absolute;
content: "";
display: block;
width: 6px;
height: 20px;
border-radius: 8px 8px 0 0;
background-color: green;
top: -19px;
left: 50%;
transform: translateX(-50%);
}
.bubble:after {
position: absolute;
content: "";
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
top: -5px;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}

上面的代碼中，我們使用了偽元素 :before 和 :after 來創(chuàng)建氣泡的尖角和反光區(qū)域。其中 :before 的寬度比較窄，高度比較大，用來形成尖角；而 :after 則通過使用 rotate 屬性實現(xiàn)了反光區(qū)域的斜角效果。

如果你想要氣泡向左或向右偏移，可以調(diào)整 .bubble:before 和 .bubble:after 中 left 的值，比如讓 left: -10px 可以讓氣泡左移10像素。

現(xiàn)在我們已經(jīng)完成了一個簡單的氣泡效果，并且可以通過 CSS 的方式控制氣泡的尺寸和顏色，使其適應各種設計需求。