CSS3实现自适应的聊天气泡

边框图片

  1. 功能:将图片规定为包围 div 元素的边框
    a) 定义和用法: border-image 属性是一个简写属性,用于设置以下属性
    border-image-source
    border-image-slice
    border-image-width
    border-image-outset
    border-image-repeat
    b) 属性说明:
    值 描述
    border-image-source 用在边框的图片的路径。
    border-image-slice 图片边框向内偏移—裁切。
    border-image-width 图片边框的宽度。
    border-image-outset 边框图像区域超出边框的量。
    border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
    效果展示:
    在这里插入图片描述

技巧:
1.把height设置成auto;
2.巧用border-image属性
气泡是一个背景图。
/* border-image-source: url(“images/btn_bg.png”);
border-image-slice:10 fill;设置四个方向上的裁切距离
border-image-width: 10px;
border-image-repeat: stretch ; */
代码:

<!DOCTYPE html>
<html lang=&#
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值