CSS实现聊天气泡效果

一、聊天气泡效果

二、border-image属性介绍

border-image 属性是一个简写属性，用于设置以下属性：

属性	描述	支持类型	默认值
border-image-source	边框图片路径		none
border-image-slice	图片边框向内偏移	30(不带单位，表示30px)、30%、fill(暂不清楚效果)	100%
border-image-width	图片边框宽度，不允许负值	10px	1
border-image-outset	边框图像区域超出边框的量，不允许负值	10px	0
border-image-repeat	图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)	repeat、round、stretch	stretch

三、实现

最终效果 | CodePen