🗒️border-image

border-image 为元素绘制 border image，取代了元素的常规 border。

最好也同时设置下 border-style，以防 border image 加载失败。尽管规范没有严格要求，但某些浏览器在 border-style: none 或 border-width: 0 时，不会渲染 border image。

border-image 是以下属性的缩写：

1. border-image-source 设置 border image 的 source image

2. border-image-slice 将 source image 划分为多个区域，它们形成 border image 的组成部分

3. border-image-repeat 定义如何调整 source image 的 edge region 和 middle region，以适应 border image 的尺寸

4. border-image-width 设置 border image 的 width。如果此值大于 border-width，则 border image 会延伸到 padding 和 content 的 edge

5. border-image-outset 设置 border image 与 border box 之间的距离

border-image-source

该属性设置 border image 的 source image。

border-image-source = none | <image>

<image> = <url> | <gradient>

<url> = url(<string> <url-modifier>*) | 
        src(<string> <url-modifier>*)
<gradient> = <linear-gradient()> | 
             <radial-gradient()> |
             <repeating-linear-gradient()> |
             <repeating-radial-gradient()>  

border-image-slice

原理

该属性定义了 4 条 slice line 的位置（即下图中的红线），将 source image 分割成 9 个区域：4 个 corners，4 个 edges 和 1 个 middle 区域。

区域		说明
1~4	corner region	每个都使用一次来形成最终 border image 的 corner
5~8	edge region	它们在最终的 border image 中被 repeated、scaled 或以其它方式修改以匹配元素的尺寸
9	middle region	默认情况会被丢弃。也可以设置关键字 fill，就像是 background image

取值

该属性可以用 1~4 个 <number-percentage> 值来指定每条 image slice 距离各自 side 的位置。

border-image-slice = [<number> | <percentage>]{1,4} && fill?

border-image-slice: 7 12 14 5;  /* top | right | bottom | left */
border-image-slice: 30 30% 45;  /* top | left and right | bottom */
border-image-slice: 10% 30%;    /* top and bottom | left and right */
border-image-slice: 30%;        /* all sides */

border-image-slice: 10% fill;   /* fill 可以放在任何位置 */
border-image-slice: fill 10%;

值	含义
<number>	表示 raster image（光栅图像）的 edge offset 和 vector image（矢量图像）的 coordinates（坐标），单位是像素
	对于 vector image，该数值与元素的大小相关，而不是与 source image 的大小相关，因此在这些情况下通常更适合取 <percentage>
<percentage>	表示 edge offset 是相对于 source image size 的百分比
	水平 offset 相对于 image width 垂直 offset 相对于 image height
fill	表示要保留 middle image region，并将其显示为 background image，但是是堆叠在实际的 background 之上。其 width 和 height 的大小分别匹配 top 和 left image regions

举例

.shape {
    width: 200px;
    height: 300px;
    background-color: lightseagreen;

    border-radius: 50%;   /* 对 border-image 无效 */
    border-width: 30px;   /* 必须 */
    border-style: solid;  /* 必须 */

    /* border-image */
    border-image-source: url('https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png');
    border-image-slice: 30 30 60 60;
}

原图、border-image-slice 分割区域（中间没剩下）、最终渲染（只有四个角）

原图、border-image-slice 分割区域（9块）、最终渲染（为了方便看加了 space 重复）

border-image-repeat

该属性定义如何调整 source image 的 edge region 和 middle region，以适应 border image 的尺寸。

border-image-repeat = [round | space | repeat | stretch]{1,2}

值	填充每条 border 的表现
round	source image 的 edge region 会被重复，为了适应尺寸会被 stretched（拉伸）
space	source image 的 edge region 会被重复，为了适应尺寸额外的空间会被分布在 tiles（瓷砖）之间
repeat	source image 的 edge region 会被重复，为了适应尺寸会被 clipped（裁剪）
stretch	source image 的 edge region 会被拉伸

主要参考

• https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

• https://drafts.csswg.org/css-backgrounds/#border-images