CSS 评论/聊天气泡：5种对话样式

三月 27, 2026 / Mr.x / 4阅读 / 0评论/ 分类: 实用创意
CSS 评论/聊天气泡：5种对话样式

CSS 评论/聊天气泡：5种对话样式

介绍

在现代 Web 应用中，聊天气泡和评论框是常见的 UI 组件。无论是即时通讯应用、社交媒体还是博客评论系统，都需要美观且易用的对话界面。本文将介绍 5 种不同风格的 CSS 聊天气泡实现方式，从基础的左右气泡到微信风格、现代简约、评论卡片和系统消息，涵盖了实际项目中的各种场景。

通过学习本文，你将掌握：

  • 如何使用 CSS 创建各种形状的气泡
  • 实现左右对齐的聊天布局
  • 添加头像、时间戳等附加信息
  • 创建交互式的评论系统
  • 实现系统消息和输入状态提示

样式一：经典左右气泡

经典的左右气泡是最常见的聊天界面设计。左侧代表对方发送的消息，右侧代表自己发送的消息。这种设计直观易懂，适合大多数聊天应用。

完整代码展示

chat-style-1.html 
<!-- HTML 结构 -->
<div class="chat-style-1">
    <!-- 接收消息 -->
    <div class="message received">
        <div class="avatar">A</div>
        <div>
            <div class="bubble">你好！最近怎么样？</div>
            <div class="time">下午 2:30</div>
        </div>
    </div>
    
    <!-- 发送消息 -->
    <div class="message sent">
        <div class="avatar">我</div>
        <div>
            <div class="bubble">挺好的！最近在忙项目</div>
            <div class="time">下午 2:32</div>
        </div>
    </div>
</div>

<!-- CSS 样式 -->
<style>
.chat-style-1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
}

.chat-style-1 .message {
    display: flex;
    gap: 12px;
    max-width: 80%;
}

/* 发送消息右对齐 */
.chat-style-1 .message.sent {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* 接收消息左对齐 */
.chat-style-1 .message.received {
    align-self: flex-start;
}

/* 头像样式 */
.chat-style-1 .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

/* 发送消息头像背景 */
.chat-style-1 .message.sent .avatar {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* 气泡样式 */
.chat-style-1 .bubble {
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
}

/* 接收消息气泡 */
.chat-style-1 .message.received .bubble {
    background: #f1f5f9;
    color: #333;
    border-bottom-left-radius: 4px;
}

/* 发送消息气泡 */
.chat-style-1 .message.sent .bubble {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: white;
    border-bottom-right-radius: 4px;
}

/* 时间戳 */
.chat-style-1 .time {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    text-align: right;
}

.chat-style-1 .message.received .time {
    text-align: left;
}
</style>

代码详细解释

布局结构： 使用 Flexbox 布局，每条消息是一个 flex 容器，包含头像和气泡两部分。

左右对齐： 通过 align-self: flex-end 和 flex-direction: row-reverse 实现发送消息右对齐，接收消息左对齐。

气泡样式： 使用 border-radius: 18px 创建圆角气泡，通过 border-bottom-left-radius: 4px 和 border-bottom-right-radius: 4px 在底部创建尖角效果。

头像设计： 使用渐变背景和圆形设计，通过 flex-shrink: 0 防止头像被压缩。

实时演示

A
你好！最近怎么样？好久没联系了 😊
下午 2:30
我
挺好的！最近在忙一个新项目，你呢？
下午 2:32
A
我也是，在做一个前端重构的项目。有空一起交流下经验？
下午 2:35
我
好啊！周末有空，到时候约个时间 👍
下午 2:36

样式二：微信风格

微信风格的聊天气泡是最受欢迎的设计之一。它采用白色气泡代表对方消息，绿色气泡代表自己的消息，并使用三角形箭头指向发送者。

完整代码展示

chat-style-2.html 
<!-- HTML 结构 -->
<div class="chat-style-2">
    <!-- 接收消息 -->
    <div class="message received">
        <div class="avatar">👤</div>
        <div class="bubble-wrapper">
            <div class="bubble">下班一起吃饭吗？</div>
        </div>
    </div>
    
    <!-- 发送消息 -->
    <div class="message sent">
        <div class="avatar">😊</div>
        <div class="bubble-wrapper">
            <div class="bubble">好呀，吃什么？</div>
        </div>
    </div>
</div>

<!-- CSS 样式 -->
<style>
.chat-style-2 {
    background: #ededed;
    border-radius: 12px;
    padding: 20px;
    max-width: 500px;
}

.chat-style-2 .message {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: flex-start;
}

/* 发送消息右对齐 */
.chat-style-2 .message.sent {
    flex-direction: row-reverse;
}

/* 头像 */
.chat-style-2 .avatar {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* 气泡包装器 */
.chat-style-2 .bubble-wrapper {
    position: relative;
}

/* 气泡 */
.chat-style-2 .bubble {
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    max-width: 260px;
}

/* 接收消息气泡 */
.chat-style-2 .message.received .bubble {
    background: white;
    color: #333;
}

/* 接收消息箭头 */
.chat-style-2 .message.received .bubble::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 12px;
    border: 4px solid transparent;
    border-right-color: white;
}

/* 发送消息气泡 */
.chat-style-2 .message.sent .bubble {
    background: #95ec69;
    color: #333;
}

/* 发送消息箭头 */
.chat-style-2 .message.sent .bubble::before {
    content: '';
    position: absolute;
    right: -8px;
    top: 12px;
    border: 4px solid transparent;
    border-left-color: #95ec69;
}
</style>

代码详细解释

箭头实现： 使用 CSS 伪元素 ::before 和 border 技巧创建三角形箭头。通过设置 border: 4px solid transparent 和单独设置某一边的颜色来实现。

位置定位： 使用 position: absolute 将箭头定位在气泡的左或右侧。

颜色区分： 接收消息使用白色，发送消息使用绿色，直观区分消息方向。

实时演示

👤
下班一起吃饭吗？
😊
好呀，吃什么？
👤
听说新开了一家川菜馆，评分很高
😊
没问题，几点？我来定位位 📍

核心代码讲解

1. Flexbox 布局的关键属性

flexbox-core.css 
/* 容器设置 */
.chat-container {
    display: flex;           /* 启用 Flexbox */
    flex-direction: column;  /* 垂直排列 */
    gap: 16px;           /* 消息间距 */
}

/* 消息项设置 */
.message {
    display: flex;           /* 启用 Flexbox */
    gap: 12px;           /* 头像和气泡间距 */
    max-width: 80%;        /* 限制宽度 */
}

/* 发送消息右对齐 */
.message.sent {
    align-self: flex-end;     /* 自身右对齐 */
    flex-direction: row-reverse; /* 反向排列 */
}

/* 接收消息左对齐 */
.message.received {
    align-self: flex-start;  /* 自身左对齐 */
}
💡 关键点

align-self 用于单个项目的对齐，flex-direction: row-reverse 反向排列元素，这样可以在不改变 HTML 结构的情况下改变视觉顺序。

2. CSS 三角形箭头的实现

triangle-arrow.css 
/* 三角形箭头原理 */
.bubble::before {
    content: '';                    /* 必须有内容 */
    position: absolute;         /* 绝对定位 */
    left: -8px;                 /* 距离左边 */
    top: 12px;                 /* 距离顶部 */
    
    /* 关键：使用 border 创建三角形 */
    border: 4px solid transparent; /* 所有边透明 */
    border-right-color: white;    /* 右边有颜色 */
}

/* 原理解释：
   当所有 border 都设置为透明时，会形成四个三角形
   只给其中一个 border 设置颜色，就能显示一个三角形
   
   border-right-color: white  → 显示指向左的三角形
   border-left-color: white   → 显示指向右的三角形
   border-top-color: white    → 显示指向下的三角形
   border-bottom-color: white → 显示指向上的三角形
*/

3. 气泡样式的关键属性

bubble-style.css 
/* 基础气泡 */
.bubble {
    padding: 12px 16px;      /* 内边距 */
    border-radius: 18px;    /* 圆角半径 */
    font-size: 14px;        /* 字体大小 */
    line-height: 1.5;       /* 行高 */
    word-wrap: break-word; /* 自动换行 */
}

/* 接收消息气泡 */
.bubble.received {
    background: #f1f5f9;           /* 浅灰背景 */
    color: #333;              /* 深色文字 */
    border-bottom-left-radius: 4px; /* 左下角尖角 */
}

/* 发送消息气泡 */
.bubble.sent {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: white;
    border-bottom-right-radius: 4px; /* 右下角尖角 */
}

/* 尖角效果原理：
   通过设置某个角的 border-radius 为较小值（4px）
   而其他角为较大值（18px），形成尖角效果
*/
💡 最佳实践

使用 word-wrap: break-word 确保长文本自动换行，使用 max-width 限制气泡宽度，防止过长的消息破坏布局。

4. 响应式设计考虑

responsive.css 
/* 桌面端 */
.message {
    max-width: 80%;
}

/* 平板端 */
@media (max-width: 768px) {
    .message {
        max-width: 85%;
    }
    
    .bubble {
        font-size: 13px;
        padding: 10px 14px;
    }
}

/* 手机端 */
@media (max-width: 480px) {
    .message {
        max-width: 90%;
    }
    
    .avatar {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .bubble {
        font-size: 12px;
        padding: 8px 12px;
    }
}

总结

通过本文的学习，我们掌握了 5 种不同风格的 CSS 聊天气泡实现方式。关键要点包括：

样式 特点 适用场景
经典左右气泡 简洁、易用、通用 大多数聊天应用
微信风格 带箭头、颜色区分 即时通讯应用
现代简约 无头像、名称标识 团队协作工具
评论卡片 包含用户信息、操作 博客、社区评论
系统消息 居中、特殊样式 系统通知、状态提示

核心技术点：

  • Flexbox 布局用于实现灵活的消息排列
  • CSS 伪元素和 border 技巧创建三角形箭头
  • border-radius 的灵活运用创建各种气泡形状
  • 媒体查询实现响应式设计
  • 渐变背景增强视觉效果

实践建议：

  • 根据实际需求选择合适的样式
  • 考虑移动端的显示效果
  • 使用 max-width 限制气泡宽度
  • 添加时间戳和用户信息增强可读性
  • 使用渐变和阴影增加视觉层次感
🎯 下一步

你可以在此基础上添加更多功能，如：消息动画、输入状态提示、消息已读状态、表情符号支持、图片消息等。这些功能可以进一步提升用户体验。

评论