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