Html 如何创建facebook Messenger之类的聊天泡泡

我将如何创建这样的聊天泡泡。更具体地说，如何将一类用户发送的两条或多条连续消息作为一个整体组合成一个气泡。例如，对于发件人-第一封邮件的右下边框为0，中间的邮件的右上下边框半径为0，最后一封邮件的右上边框半径为0。我必须使用javascript还是可以使用css来完成

HTML结构可以是

<ul>
 <li class="him">By Other User</li>
 <li class="me">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me">By this User, fourth message</li>
</ul>

由其他用户
此用户发出的第一条消息
此用户发出的第二条消息
此用户发出的第三条消息
此用户发出的第四条消息

---

我应该使用什么样的css类/样式？

这是一个相当基本的示例，但它应该解释您需要的所有基础知识

大多数解决方案都在

+

中。在本例中，它用于将不同的边界半径应用于来自同一个人的一行多条消息

ul{
列表样式：无；
保证金：0；
填充：0；
}
ulli{
显示：内联块；
明确：两者皆有；
填充：20px；
边界半径：30px；
边缘底部：2px；
字体系列：Helvetica、Arial、无衬线字体；
}
.他{
背景：#eee；
浮动：左；
}
.我{
浮动：对；
背景：#0084ff；
颜色：#fff；
}
.他+我{
边框右下半径：5px；
}
.我+.我{
边框右上角半径：5px；
边框右下半径：5px；
}
.我：最后一种{
边框右下半径：30px；
}

由其他用户
此用户发出的第一条消息
此用户发出的第二条消息
此用户发出的第三条消息
此用户发出的第四条消息

在创建文本气泡时，我建议遵循本文提供的帮助：

对于开始和结束的气泡，使用JQuery根据其父容器识别和更改它们的CSS属性。 如果您想要发送的图像，您需要将它们包装在li内，并在相对对象（li）内进行向右浮动或绝对位置

使用以下脚本更改第一个和最后一个li：

$('.ulContainer li:first').css('border-top-right-radius','10px');
$('.ulContainer li:last').css('border-bottom-right-radius','10px');

以下是JSFIDLE：

根据您的评论更新：

我相信这是在不使用JQuery的情况下最接近您想要实现的目标。您需要高级选择器，只能通过JQuery对.each（）语句进行分组才能获得。或者通过向列表中添加多个css类

有关如何使用多个CSS类的信息，请参见

或见下文：

.fancyContainer{
边框：1px实心#555；
位置：相对位置；
宽度：300px；
填充物：5px；
溢出：隐藏；
}
.聊天室{
宽度：300px；
列表样式：无；
利润率：0-40px；
位置：0；
}
李先生{
保证金：5px0 5px0；
填充物：3px 5px 3px 5px；
}
/*为.me设置初始聊天元素*/
.聊天室，我{
最小高度：20px；
浮动：对；
明确：两者皆有；
背景色：#34a1ef；
边界半径：10px 2px 10px；
}
/*为他设置初始聊天元素*/
.聊天室，他{
最小高度：20px；
浮动：左；
明确：两者皆有；
背景色：#ddd；
边界半径：2px 10px 10px 2px；
}
/*设置分组半径*/
.他+我{
边框右上角半径：10px；
}
.我+他{
边框左上半径：10px；
}
.我+.我{
边框右下半径：2px；
}
.他{
边框左下半径：2px；
}
/*为我设置第一个和最后一个半径*/
.chatBox>.me：第一个孩子{
边框右上角半径：10px；
}
.chatBox>.me:最后一个孩子{
边框右下半径：10px；
}
/*为他设置第一个和最后一个半径*/
.chatBox>.him：第一个孩子{
边框左上半径：10px；
}
.chatBox>.him:最后一个孩子{
边框左下半径：10px；
}

你好。。。这是一个聊天室。
很好。我猜这是个聊天室
我得改天再谈
不要等了。我可能会改变主意
感觉不错，先生！我们现在就在这里谈
我喜欢
冰棒
我真不敢相信你竟然这样对我

您需要一个开始类和一个结束类，如下所示

li{
边框：1px纯黑；
列表样式类型：无；
边际：2px0；
填充物：2px 5px；
}
.他{
浮动：左；
边界半径：0 10px 10px 0；
明确：两者皆有；
}
.我{
浮动：对；
边界半径：10px 0 10px；
明确：两者皆有；
}
.他，开始{
边框左上半径：10px；
}
.他，结束{
边框左下半径：10px；
}
.我，开始{
边框右上角半径：10px；
}
.me.end{
边框右下半径：10px；
}

由其他用户启动
由其他用户
由其他用户
此用户发出的第一条消息
此用户发出的第二条消息
此用户发出的第三条消息
此用户发出的第四条消息
由其他用户启动
由其他用户
由其他用户
此用户发出的第一条消息
此用户发出的第二条消息
此用户发出的第三条消息
此用户发出的第四条消息

这是一个纯css解决方案，但它取决于您在发送组的最后一条消息时检测并应用

聊天气泡--stop

类的能力。不幸的是，不能使用伪类

：type

的last；正如其他人所指出的，小组中的最后一条信息不一定是对话的最后一条。它还使用相邻的同级选择器（

+.ulContainer li{
  width:200px;
  height:20px;
  background-color:#9abff9;
  list-style-type:none;
  margin:10px 0 10px 0;
  padding: 3px 3px 3px 5px;
  border-radius: 10px 2px 2px 10px;
}

$('.ulContainer li:first').css('border-top-right-radius','10px');
$('.ulContainer li:last').css('border-bottom-right-radius','10px');