CSS 消息气泡实现

最新推荐文章于 2024-06-07 09:07:16 发布

李牙刷儿_

最新推荐文章于 2024-06-07 09:07:16 发布

阅读量8.2k

点赞数 3

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/asiaLIYAZHOU/article/details/78713810

版权

前端页面开发中经常需要实现消息气泡样式，比如：

实际上上述两种效果实现起来，并不复杂，接下来我们就来实战一下。

1. 构建消息框

消息框主体很简单，一个div，设置一下背景颜色、border-radius等即可：

.message1,.message2 {
  width: 200px;
  height: 80px;
  margin: 100px auto;
  background-color: green;
  border-bottom-color:green;/*为了给after伪元素自动继承*/
  color: #fff;
  font-size: 12px;
  font-family: Arial;
  line-height: 18px;
  padding: 5px 12px 5px 12px;
  box-sizing: border-box;
  border-radius: 6px;
  position: relative;
  word-break: break-all;
}

<body>
  <div class="message1">
    Demos 代码演示、代码片段 - 读你，欢迎来到读你，http://dunizb.com/demo/
  </div>

  <div class="message2">
    Demos 代码演示、代码片段 - 读你，欢迎来到读你，http://dunizb.com/demo/
  </div>
</body>