CSS3实现透明的气泡框

/* 气泡框样式 */
.bubble {
    position: relative;
    background-color: rgba(255, 255, 255, 0.7); /* 白色背景，70% 不透明度 */
    border-radius: 10px; /* 圆角 */
    padding: 10px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
}
 
/* 气泡箭头样式 */
.bubble:after {
    content: '';
    position: absolute;
    top: 50%; /* 位于容器的中间 */
    left: 100%; /* 位于容器右侧 */
    border-width: 10px; /* 箭头大小 */
    border-style: solid;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.7); /* 上边框透明，其余为背景颜色 */
    border-radius: 0 0 10px 10px; /* 圆角 */
}
 
/* 气泡内文本样式 */
.bubble p {
    margin: 0; /* 重置边距 */
    color: #333; /* 文本颜色 */
}

这段代码定义了一个气泡框的基本样式，并使用伪元素 :after 来创建一个三角形的箭头，使得气泡看起来像是指向某个方向。气泡框具有圆角和透明背景，并且可以通过调整 border-radius、background-color 和 border 属性来自定义它的样式。