CSS中的氣泡效果可以通過(guò)偽元素和border屬性來(lái)實(shí)現(xiàn)。如下是一個(gè)簡(jiǎn)單的例子:
.bubble { position: relative; border-radius: 10px; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); padding: 10px; font-size: 14px; line-height: 1.5; margin-bottom: 20px; } .bubble:after { content: ""; display: block; position: absolute; top: 100%; left: 50%; border: 7px solid transparent; border-top-color: #fff; transform: translateX(-50%); }
以上代碼中,.bubble類是我們要給氣泡添加樣式的元素,我們給它設(shè)置了圓角、背景色、陰影、字體等基本樣式。偽元素:after是用來(lái)實(shí)現(xiàn)氣泡尖角的,它的具體實(shí)現(xiàn)方式是先讓它在.bubble元素的下方并居中,然后設(shè)置邊框?qū)傩裕詈笸ㄟ^(guò)transform屬性來(lái)調(diào)整位置。
如果我們想要改動(dòng)氣泡的樣式,只需要修改.bubble和.bubble:after的相關(guān)樣式即可。例如,我們可以通過(guò)調(diào)整邊框和背景色來(lái)改變氣泡的形狀和顏色:
.bubble { position: relative; border-radius: 20px; background-color: #f6c; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); padding: 15px; font-size: 16px; line-height: 1.5; margin-bottom: 30px; } .bubble:after { content: ""; display: block; position: absolute; top: 100%; left: 50%; border: 10px solid transparent; border-top-color: #f6c; transform: translateX(-50%); }
以上代碼中,我們把氣泡的圓角半徑修改為20px,背景顏色修改為淡黃色,邊框粗細(xì)增加并修改顏色為淡黃色即可。