[分享]css制作聊天气泡android

在移动应用中，聊天气泡是比较常见的元素。在Android中，我们可以使用CSS来制作漂亮的聊天气泡效果。本文将介绍如何使用CSS制作聊天气泡。/ 定义气泡的样式 / .chatbubble { : r...

在移动应用中，聊天气泡是比较常见的元素。在Android中，我们可以使用CSS来制作漂亮的聊天气泡效果。本文将介绍如何使用CSS制作聊天气泡。

/* 定义气泡的样式 */
.chat-bubble {
  position: relative;
  display: inline-block;
  padding: 8px 15px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* 定义气泡箭头的样式 */
.chat-bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -16px;
  margin-top: -10px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #FFF;
}

/* 定义对方发送的气泡的样式 */
.chat-bubble.from {
  background-color: #DCF8C6;
  margin-right: 50px;
}

/* 定义自己发送的气泡的样式 */
.chat-bubble.to {
  background-color: #E5E5EA;
  margin-left: 50px;
}

/* 取消气泡的边框 */
.chat-bubble.from::before,
.chat-bubble.to::before {
  border-width: 10px;
  border-style: none;
  right: auto;
  left: -16px;
  border-right-color: transparent;
}

/* 进一步优化样式 */
.chat-bubble p {
  margin: 0;
  line-height: 1.5em;
  text-align: justify;
} 

以上代码定义了气泡的样式、箭头的样式以及对方发送和自己发送的气泡样式的区别。可以根据自己的需求进行调整。

最后，使用以下HTML结构可以创建一个聊天气泡：

<div class="chat-bubble from">
  <p>Hello, how are you?</p>
</div> 

这个例子中是一个对方发送的气泡。如果想要创建自己发送的气泡，只需要将"class"改为"to"即可。