CSS实现聊天气泡效果

一、聊天气泡效果 CSS实现聊天气泡效果
文章图片

二、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实现聊天气泡效果
文章图片

最终效果 | CodePen

    推荐阅读