css实现气泡效果 |css3 视觉差

.bubble {
position: relative;
background-color: #00bcd4;
color: #fff;
border-radius: 50%;
padding: 10px 15px;
font-size: 16px;
font-weight: bold;
}
.bubble::after {
content: "";
position: absolute;
top: -20px;
left: 50%;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid #00bcd4;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
transform: translateX(-50%);
}

以上代码中，大家设置了一个容器元素.bubble来代表气泡，为了让气泡有圆角效果，大家使用了border-radius属性。接着大家使用伪元素::after来创建气泡三角形的效果，设置了其位置在气泡顶部中间，border属性则用于绘制出三角形的形状。

值得注意的是，气泡的尺寸会根据文字内容的多少自适应调整。同时大家可以使用CSS动画和过渡效果将气泡更加生动地展现出来。

CSS实现气泡效果是一种简单而又实用的技巧，其应用范围广泛，可以在聊天界面、提示框等UI设计中使用，进一步提升网页交互体验。