border-image

border-image 是 CSS 中的一个属性，用于使用图像作为元素的边框。这个属性提供了一种更灵活和自定义的方式来装饰元素的边框。

以下是一些与 border-image 相关的子属性：

1. border-image-source

• 用于指定用作边框图像的 URL。
• 如果未设置此属性或值为 none，则不会显示边框图像。

2. border-image-slice

• 用于定义如何将边框图像切割成九个区域（上、右、下、左以及四个角）。
• 可以使用具体的长度值或百分比来设置切割线的位置。
• 可以提供一到四个值，分别对应上、右、下、左边的切割线位置。

3. border-image-width

• 用于设置边框图像区域的宽度。
• 可以使用具体的长度值、百分比或关键字（auto）来设置。
• 默认值为 1，表示边框图像区域的宽度等于边框宽度。

4. border-image-repeat

• 用于设置边框图像在边框区域中的平铺方式。
• 可选值包括 stretch（拉伸）、repeat（重复）、round（重复并尽可能完整地显示图像）和 space（重复并均匀分布空白）。
• 可以分别设置水平和垂直方向的平铺方式。

5. border-image-outset

• 用于设置边框图像区域超出边框盒子的距离。
• 可以使用具体的长度值来设置。
• 默认值为 0，表示边框图像区域与边框盒子对齐。

6. border-image

• 是一个简写属性，可以同时设置上述所有相关的边框图像属性。
• 各个属性的顺序为：source slice width outset repeat。

例如，以下是一个使用 border-image 的示例：

div {
  border-width: 30px;
  border-image-source: url('border-image.png');
  border-image-slice: 30 fill;
  border-image-repeat: round;
}

在这个示例中，我们设置了 border-image-source 为 "border-image.png"，这意味着我们将使用该图像作为边框。border-image-slice 值为 30 和 fill，表示我们将图像切割为九个区域，并且填充剩余的空间。border-image-repeat 设置为 round，这意味着图像将在边框区域中尽可能完整地显示。border-width 设置为 30px，为边框图像提供了空间。