css画出气泡 |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 来创建气泡的尖角和反光区域。其中 :before 的宽度比较窄，高度比较大，用来形成尖角；而 :after 则通过使用 rotate 属性实现了反光区域的斜角效果。

如果你想要气泡向左或向右偏移，可以调整 .bubble:before 和 .bubble:after 中 left 的值，比如让 left: -10px 可以让气泡左移10像素。

现在大家已经完成了一个简单的气泡效果，并且可以通过 CSS 的方式控制气泡的尺寸和颜色，使其适应各种设计需求。