css微信对话框样式

CSS微信对话框样式是制作网页及移动应用界面时经常用到的一种样式。若想要制作出类似微信对话框的样式，可以参考以下CSS底层代码。

/*对话框外框*/
.dialog-Box {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}

/*头像样式*/
.avatar {
  height: 30px;
  width: 30px;
  margin-right: 10px;
  border-radius: 50%;
}

/*对话框文字样式*/
.dialog-content {
  font-size: 16px;
  color: #000;
  line-height: 20px;
  word-wrap: break-word;
  word-break: break-all;
}

/*左侧文本*/
.dialog-Box.left .avatar {
  float: left;
}

.dialog-Box.left .dialog-content {
  float: left;
  margin-left: 10px;
  max-width: 70%;
}

/*右侧文本*/
.dialog-Box.right .avatar {
  float: right;
}

.dialog-Box.right .dialog-content {
  float: right;
  margin-right: 10px;
  max-width: 70%;
}

可以看到，代码主要通过设置对话框外框的宽度、高度、背景色、圆角等属性以及头像和文字的样式来实现微信对话框的效果。同时，通过设置左侧和右侧文本的样式来实现对话框在界面上的左右对称。

当然，以上的 CSS 代码仅仅是微信样式的一种实现方式，可以根据自己的需求进行更改和调整，使其更加符合自己的设计风格。