一、聊天气泡效果
文章图片
二、border-image属性介绍
【CSS实现聊天气泡效果】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 |
![CSS实现聊天气泡效果](https://img.it610.com/image/info9/f1f5248504fd4a9eb90800a2b9be827b.jpg)
文章图片
最终效果 | CodePen