border-image属性解读CSS border-image 是用图片替代元素边框的方式，可以实现自定义边框样式，

border-image

border-image-source:图像
border-image-slice：切角，四个角，上右下左，同设置margin规律
border-image-repeat：填充四个边
border-image-width:边框图片在元素边框上的实际显示宽度，默认情况下，它是等于 border-width

前提：需要设置 border-width

border-image 是用图片替代元素边框的视觉效果，但边框本身的宽度仍由 border-width 决定。
border-width 定义了图片边框的“空间大小”，也就是元素内容和边框的距离。
如果不设置 border-width（默认 0），边框空间为 0，图片就无法显示。

border-image-slice

四个角，四条边，中心区域

切角：九宫格；slice大小根据实际想要的边框效果设置

最大值：上下 < 图片高度的一半；左右 < 图片宽度的一半；数值不要单位（px）

border-image-slice 超过图片宽高的一半,四个角依然存在，边不存在（因为中间部分被切掉了），

边不存在 border-image-repeat 填充时，边的部分就是空白

<style>
  .box {
    width: 500px;
    height: 300px;
    font-size: 50px;
    display: grid;
    place-items: center;

    border: 27px solid transparent;
    border-image-source: url("./assets/border-image.png");

    border-image-slice: 40;
    /* border-image-slice: 40; */
    /* border-image-slice: 41; */
    border-image-repeat: round;
    border-image-width: 10px;
    /* 数值，是相对于border-width 的倍数 */
    /* 默认等于 border-width */
    box-sizing: border-box;
    background-color: salmon;
    background-clip: padding-box;
  }
</style>

border-image-slice: 40;border-image-width: 10px

border-image-slice: 41;border-image-width: 10px

border-image-slice设置大小超过图片宽高的一半，边不存在（被切四角时切掉了），所以边填充显示空白

border-image-slice: 27;border-image-width: 27px

切图示例

border-image-slice 会把图片切成 9 个区域（3×3）：

+----+----+----+
| TL | T  | TR |
+----+----+----+
| L  | C  | R  |
+----+----+----+
| BL | B  | BR |
+----+----+----+

TL/TR/BL/BR → 四个角
T/B → 上下边框
L/R → 左右边框
C → 中间区域

border-image-slice:27 fill;fill 填充底图为：中心区域图形 C

border-image-repeat

定义图片如何填充边框：填充底图就是四条边

原图 81×81，slice=27

+----+----+----+
| TL | T  | TR |
+----+----+----+
| L  | C  | R  |
+----+----+----+
| BL | B  | BR |
+----+----+----+

填充边框时：

T → 使用上边中间部分（不包含左右角）
B → 使用下边中间部分（不包含左右角）
L → 使用左边中间部分（不包含上下角）
R → 使用右边中间部分（不包含上下角）

值	描述
`stretch`	拉伸边条填满边框（默认）
`repeat`	平铺边条，直到填满
`round`	平铺，但缩放图片整齐填满
`space`	平铺，不拉伸，边缘留空

border-image-width:控制边条粗细

.box {
  background-color: salmon;
  background-clip: padding-box;
}

通过设置background-clip，观察border-image-width大小的变化

边框图片在元素边框上的实际显示宽度，默认情况下，它是等于 border-width

border-width:27px;

border-image-width:数值/具体像素

当border: 27px solid transparent;

border-image-slice: 27;border-image-width: 27px

border-image-slice: 27;border-image-width: 10px

对比参照

对比盒子不设置border-image，方便观察border-image-width的变化

.box {
            width: 500px;
            height: 300px;
            font-size: 50px;
            display: grid;
            place-items: center;
            border: 27px solid transparent;
            border-image-source: url('./assets/border-image.png');
            border-image-slice: 40;
            border-image-repeat: round;
            border-image-width: 10px;
            box-sizing: border-box;
            position: relative;
            background-color: salmon;
            background-clip: padding-box;
            margin-bottom: 20px;

        }
        .box-contrast{
            width: 500px;
            height: 300px;
            font-size: 50px;
            display: grid;
            place-items: center;
            border: 27px solid lightblue;
            box-sizing: border-box;
            background-color: salmon;
            background-clip: padding-box;
        }