border-image:允许在边框上绘制图片。

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

• border-image-slice 图片边框向内偏移。

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

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

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

注意:

• 要想border-image能够生效, 则border-width 不能为 0和border-style的值不能是none

在线工具: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator

一. border-image-slice

这个属性的值表示的在把边框图片进行分割为9宫格时候的偏移量。

每个border-image图片都会被这个属性分割成9宫格。

比如下面的图片 （78 * 78），如果设置border-image-slice : 27，则会进行如下分割。

注意:

• 这个属性的值不能带单位, 27表示图片中的27个像素.

二. border-image-width

设置边框图片的宽度.

如果这个值超过了border-image-slice, 则边框图片会被拉伸, 如果小于, 则会被压缩.

一般设置为与border-image-slice的属性的值相等

注意:

- 他的值对border的宽没有任何的影响, 换句话说, 对元素的尺寸没有任何的影响.

三. border-image-repeat：

设置蓝色快的拉伸或平铺模式。主要有四个值：

• streth拉伸(默认)

• repeat重复

• round重复

• space重复

四. border-image-outset：

边框图片超出边框的量.

不会对周围的元素有任何的影响.

负值无效.

一般不设置此属性

五.简写

/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

注意:

• 书写的时候要注意他们的顺序. 由于outset和width的相似性, 所以outset必须在width之后.

• slice, width, outset之家要使用/来隔开