🗒️border-image

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

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

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

border-image-source 设置 border image 的 source image
border-image-slice 将 source image 划分为多个区域，它们形成 border image 的组成部分
border-image-repeat 定义如何调整 source image 的 edge region 和 middle region，以适应 border image 的尺寸
border-image-width 设置 border image 的 width。如果此值大于 border-width，则 border image 会延伸到 padding 和 content 的 edge
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 或以其它方式修改以匹配元素的尺寸

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-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 会被拉伸

主要参考

PreviousUI Nextbox-shadow

Last updated 1 year ago