CSS中的border-image-slice属性详解

1. 描述

border-image-slice属性是CSS中用于控制“边框图片”如何被切割和映射到元素边框的关键属性。它通常与border-image-source、border-image-width、border-image-outset和border-image-repeat属性一起，构成完整的CSS边框图片（Border Image）功能。这个属性决定了如何将一张图片分割成9个区域，并指定哪些部分用于填充边框的边、角以及中间内容区域。

核心概念：想象你把一张图片覆盖在元素边框区域上。border-image-slice的作用是定义从图片的四个边向内“切割”的偏移量，将图片切成9块（就像九宫格），然后这9块分别对应到元素边框的4个角、4条边以及中间区域。

2. 属性和值

border-image-slice的语法如下：

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

• <number>：无单位数字，表示在图片上的偏移量（基于图片的坐标单位，例如位图像素）。例如，30表示从图片边缘向内偏移30个像素（或点）的位置进行切割。
• <percentage>：百分比，相对于图片的尺寸。例如，25%表示从边缘向内偏移图片宽度（水平边）或高度（垂直边）的25%。
• {1,4}：可以设置1到4个值，遵循CSS的“上右下左”顺序规则（类似margin和padding）。
  • 1个值：四个方向使用同一个值。
  • 2个值：第一个值用于上下，第二个值用于左右。
  • 3个值：第一个值用于上，第二个值用于左右，第三个值用于下。
  • 4个值：按上、右、下、左的顺序分别设置。
• fill：可选关键字。如果加上fill，图片的第9块（中间区域）也会被保留并填充到元素的内容区域（背景之上）。默认情况下，中间区域是丢弃的。

注意：

• 数字值不带单位，但它不是长度，而是基于图片自身的坐标。在矢量图（如SVG）中，它参考用户坐标。
• 切割线之间的区域就是最终的“切片”。

3. 切割原理（九宫格）

假设你有一张图片，你通过border-image-slice指定了四个切割值（例如30）：

1. 从图片的上边缘向下30像素画一条水平切割线。
2. 从右边缘向左30像素画一条垂直切割线。
3. 从下边缘向上30像素画一条水平切割线。
4. 从左边缘向右30像素画一条垂直切割线。

这4条线将图片分割为9个区域：

• 区域1、3、7、9：四个角（左上、右上、左下、右下）。
• 区域2、4、6、8：四个边（上、右、下、左）。
• 区域5：中间。

在默认情况下（无fill）：

• 四个角（1,3,7,9）被直接放置到元素边框的四个角，不会拉伸或重复。
• 四个边（2,4,6,8）根据border-image-repeat属性（默认为stretch）进行拉伸或重复，以填充边框的边。
• 中间区域（5）被丢弃。

如果加上fill，中间区域会像背景一样填充元素的内容框（在背景之上，内容之下）。

4. 示例和步骤

步骤1：准备图片和元素
假设有一张 90px × 90px 的PNG图片（border.png），它被设计成一个圆角矩形边框，中心是透明的。我们将其应用到一个div上。

div {
  width: 200px;
  height: 150px;
  border: 30px solid transparent; /* 为边框图片预留空间 */
  border-image-source: url('border.png');
  border-image-width: 30px; /* 边框图片显示的宽度 */
  border-image-outset: 0;   /* 图片向外扩展，这里为0 */
  border-image-repeat: stretch; /* 边的图片如何适应 */
}

步骤2：应用border-image-slice
我们希望从图片的每个边缘向内切割30像素（因为图片正好是90×90，30像素刚好是三分之一）。

div {
  border-image-slice: 30;
}

由于图片尺寸是90×90，30等价于33.333%（30/90）。此时：

• 四个角（30×30像素的小方块）对应边框的四个角。
• 四个边（上、下边的30×30区域，左、右边的30×30区域）会被拉伸以填满边框的边。

步骤3：观察效果

• 如果border-image-repeat: stretch;（默认），边区域会被拉伸，可能导致圆角变形。
• 可以改为border-image-repeat: round;或repeat，让边区域平铺。

步骤4：使用fill
如果希望中间区域也显示（比如图片中间有花纹），可以：

div {
  border-image-slice: 30 fill;
}

此时中间区域会填充内容区。注意，如果图片中间是透明的，则会显示元素背景色。

5. 百分比和数字混合使用

你可以为每个方向指定不同的切割值：

border-image-slice: 20% 15 10% 5%;

意思是：上边缘向内20%，右边缘向内15（像素），下边缘向内10%，左边缘向内5%。

6. 注意事项

• 与border-image-width的关系：border-image-slice控制图片如何切割，border-image-width控制切割后的切片在元素边框上显示的宽度。两者可以不同，切片会被缩放以适应border-image-width设置的边框宽度。
• 透明边框：为了让边框图片显示，通常需要设置border-style: solid和border-color: transparent，或者直接设置border: 30px solid transparent，为图片预留空间。
• 矢量图：对于SVG，数字值参考SVG的坐标系统。
• 缩写：border-image缩写属性可以一次性设置source、slice、width、outset和repeat。例如：

  border-image: url('border.png') 30 / 30px / 0 stretch;
  

  其中30就是slice。

7. 常见应用场景

• 创建可变宽高的圆角边框，不受传统border-radius限制。
• 游戏UI、按钮、对话框等需要复杂边框样式的界面。
• 将一张大图分割，高效用于不同尺寸的元素。

掌握border-image-slice的关键是理解“九宫格切割”和“边角映射”的原理，它让边框设计从单一颜色/样式解放出来，进入可任意图形的丰富世界。