当前位置：首页 > CSS

css制作气泡样式

2026-03-12 14:45:01CSS

使用纯CSS制作气泡样式

气泡样式通常用于对话框、提示框或注释等场景。以下是几种常见的实现方法：

基础气泡框实现

通过CSS的border和position属性创建三角形箭头：

.bubble {
  position: relative;
  background: #88b7d5;
  border: 4px solid #c2e1f5;
  padding: 20px;
  border-radius: 10px;
  color: white;
  max-width: 200px;
}

.bubble:after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -20px;
  border-width: 20px 20px 0;
  border-style: solid;
  border-color: #88b7d5 transparent;
}

带边框的气泡箭头

当需要箭头也有边框时：

.bubble-with-border:before {
  content: '';
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -24px;
  border-width: 24px 24px 0;
  border-style: solid;
  border-color: #c2e1f5 transparent;
}

.bubble-with-border:after {
  bottom: -20px;
  margin-left: -20px;
  border-width: 20px 20px 0;
  border-color: #88b7d5 transparent;
}

不同方向的箭头

调整箭头方向只需修改定位和边框属性：

/* 顶部箭头 */
.top-arrow:after {
  top: -20px;
  bottom: auto;
  border-width: 0 20px 20px;
}

/* 左侧箭头 */
.left-arrow:after {
  left: -20px;
  top: 50%;
  margin-top: -20px;
  border-width: 20px 20px 20px 0;
  border-color: transparent #88b7d5;
}

/* 右侧箭头 */
.right-arrow:after {
  right: -20px;
  left: auto;
  top: 50%;
  margin-top: -20px;
  border-width: 20px 0 20px 20px;
  border-color: transparent #88b7d5;
}

使用CSS3滤镜增强效果

添加阴影和发光效果：

.bubble-shadow {
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.bubble-shadow:after {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

圆角气泡变体

完全圆形的气泡：

css制作气泡样式

.round-bubble {
  border-radius: 50px;
  padding: 15px 25px;
}

.round-bubble:after {
  border-width: 15px 10px 0;
  bottom: -15px;
  margin-left: -10px;
}

这些CSS代码片段可以组合使用，通过调整颜色、大小和位置参数，可以创建各种风格的气泡效果。现代浏览器都良好支持这些CSS特性，无需额外JavaScript即可实现。