border-image-source 用在边框的图片的路径。

border-image-slice 图片边框向内偏移,可以写入四个值或者fill填满。

border-image-width 图片边框的宽度。

border-image-outset 边框图像区域超出边框的量。

border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

1、border-image-source

初始值：none

Value:none | <image>

可以应用在所有元素上，除了表格的border-collapse为collapse除外。

可以设置图片和渐变等作为边框图像，设置后会覆盖设置的border-style样式。如果为none，则会被border-style替换。

这个属性设置的边框图片宽度与border-image-width有关，如果没有设置border-image-width，则默认是border-width的值。

可以添加linear-gradient或url等属性：

2、border-image-slice

初始值：100%

  /* 所有的边 */
  border-image-slice: 30%;
  /* 垂直方向 | 水平方向 */
  border-image-slice: 10% 30%;
  /* 顶部 | 水平方向 | 底部 */
  border-image-slice: 30 30% 45;
  /* 上 右 下 左 （顺时针）*/
  border-image-slice: 7 12 14 5;
  border-image-slice: 10% 40% 60% 20%;
  /* 使用fill（fill可以放在任意位置）*/
  border-image-slice: 10% fill 7 12;

3、border-image-width

初始值：1

length是可以带单位的长度。

number是数字，不带单位，指定为相应的border-width的倍数。

百分比是基于边框图像区域（border image area）的宽高。

auto，则边框的宽度（border-image-width）等于相应的边框图像切片（border-image-slice）的固有宽度或高度，如果图像不具有所需的固有尺寸，则使用相应的边框宽度（border-width）。

不允许负值。

/* 自动值 */
border-image-width: auto;
/* 长度 */
border-image-width: 2rem;
/* 百分比 */
border-image-width: 15%;
/* 数值 */
border-image-width: 9;
/* 垂于于水平 */
border-image-width: 5em 7em;
/* 顶部，水平，底部*/
border-image-width: 15% 15% 30%;
/* 上 右 下 左 （顺时针） */
border-image-width: 15% 7em 20% 70%;

4、border-image-outset

初始值：0

length，就是有单位的数值。

number，边框图像的大小是元素相应边框宽度（border-width）的倍数。

/* 长度 */
border-image-outset: 2rem;
/* 数值 */
border-image-outset: 2;
/* 垂于于水平 */
border-image-outset: 2 1.5;
/* 顶部，水平，底部 */
border-image-outset: 25px 3 18px;
/* 上 右 下 左 （顺时针） */
border-image-outset: 9px 15px 24px 6px;

5、border-image-repeat

初始值：stretch

Value:[ stretch | repeat | round | space ]{1,2}

此属性指定边框图像的侧面和中间部分的图像如何缩放和平铺。

第一个关键字适用于顶部，中间和底部的水平缩放和平铺，第二个关键字适用于左，中间和右侧部分的垂直缩放和平铺。

第二个缺省，默认和第一个值一样。

stretch

拉伸，源图像的边缘区域被拉伸以填充每个边框之间的间隙。

repeat

重复，源图像的边缘区域被平铺（重复）以填充每个边框之间的间隙。可能会修剪单元以达到适当的贴合度。单元图像可能会被裁剪一部分。其实和背景图片的重复是一样的。

round

平铺，但是会调整单元图像以达到和区域的适配，保持整数倍的平铺，和背景图片的平铺的round属性值是一样的特性。

space

单元图像不会拉伸变形，如果不能整数倍的重复， 则会产生平分的间隔

如何在这个小对话框里写入内容，当我们进行平铺的时候这个图片是出现在四周的。

202101221611305468153603

<div class="box box3">第一次出国，妈妈帮我整行李，在行李整得差不多的时候，她突然拿出一个透明的小瓶子，里面装着黑色的东西。</div>

css

.box3{ border-image-source: url(img/chat.jpg); }

202101221611305519230621
那我们就可以利用平铺来将内容放进去

css：

.box3{ 
	border-image-source: url(img/chat.jpg); 
	border-image-repeat: round; 
	border-image-slice: 33 34 20 70; 
}

代码演示：

202101221611305362119400