CSS 9宫格切片：`border-image-slice` 的填充逻辑与拉伸算法

各位观众，大家好。今天我们来深入探讨CSS中一个强大的属性：border-image-slice。它允许我们利用图片来创建复杂且可伸缩的边框，极大地提升了网页设计的灵活性。我们将从基本概念入手，逐步分析其填充逻辑和拉伸算法，并通过实例代码加深理解。

9宫格切片的概念

border-image-slice 的核心思想是将一张图片分割成九个区域，分别对应边框的四个角、四条边以及中心区域。这九个区域分别用于绘制元素的边框和背景。

想象一下，你有一张矩形图片，用两条水平线和两条垂直线将其分割成九个部分。这四条线的位置由 border-image-slice 属性的值来定义。

border-image-slice 属性接受一到四个数值，这些数值定义了从图片边缘向内偏移的距离，用于确定分割线的位置。其语法结构如下：

border-image-slice: <top> <right> <bottom> <left> fill? ;

<top>: 上边缘的偏移量。
<right>: 右边缘的偏移量。
<bottom>: 下边缘的偏移量。
<left>: 左边缘的偏移量。
fill: (可选) 指示是否保留中间区域作为元素的背景。

与 margin 和 padding 类似，border-image-slice 的值也遵循以下规则：

一个值: 所有四个边缘都使用相同的值。
两个值: 第一个值用于上边缘和下边缘，第二个值用于左边缘和右边缘。
三个值: 第一个值用于上边缘，第二个值用于左边缘和右边缘，第三个值用于下边缘。
四个值: 分别用于上、右、下、左边缘。

例如：

border-image-slice: 10; /* 所有边缘偏移10像素 */
border-image-slice: 10 20; /* 上下10像素，左右20像素 */
border-image-slice: 10 20 30; /* 上10像素，左右20像素，下30像素 */
border-image-slice: 10 20 30 40; /* 上10像素，右20像素，下30像素，左40像素 */

`border-image-source` 和其他相关属性

border-image-slice 只是 9 宫格切片的一部分。要使它生效，还需要配合其他 border-image 相关的属性：

border-image-source: 指定要使用的图片。
border-image-width: 指定边框图像的宽度。
border-image-outset: 指定边框图像超出边框的距离。
border-image-repeat: 指定边框图像的重复方式。

一个完整的例子：

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  height: 100px;
  border: 20px solid transparent; /* 必须设置边框宽度 */
  border-image-source: url("border.png");
  border-image-slice: 20;
  border-image-width: 20px;
  border-image-outset: 0;
  border-image-repeat: stretch;
}
</style>
</head>
<body>

<div class="box">
  This is a box with a border image.
</div>

</body>
</html>

在这个例子中，border.png 就是我们用于创建边框的图片。border: 20px solid transparent; 非常重要，它定义了边框的实际宽度，为边框图像提供了空间。 border-image-slice: 20; 表示从图片的每个边缘向内偏移20像素。border-image-width: 20px; 定义了边框图像的宽度。border-image-repeat: stretch; 指定了边框图像的重复方式为拉伸。

填充逻辑：九个区域的应用

一旦图片被分割成九个区域，它们就会被分配到元素的各个部分：

区域	应用
左上角	元素的左上角边框
上边缘	元素的上边框
右上角	元素的右上角边框
左边缘	元素的左边框
中心	元素的背景 (如果 `fill` 关键字被使用)
右边缘	元素的右边框
左下角	元素的左下角边框
下边缘	元素的下边框
右下角	元素的右下角边框

如果没有指定 fill 关键字，中心区域将被丢弃，元素的背景将由 background-color 或 background-image 等其他属性控制。

如果指定了 fill 关键字，中心区域将被用作元素的背景。这在某些情况下非常有用，例如，当你想用图片的中心部分填充元素的内部时。

border-image-slice: 20 fill; /* 使用中心区域填充 */

拉伸算法：`border-image-repeat`

border-image-repeat 属性控制着边框图像的边缘部分如何填充边框。它接受以下几个值：

stretch: 拉伸边框图像以填充可用空间。这是最常用的值。
repeat: 重复边框图像以填充可用空间。
round: 重复边框图像，并在必要时调整大小，以使其完整地重复。
space: 重复边框图像，并在图像之间添加间距以填充可用空间。

让我们分别详细分析这些值：

1. stretch (拉伸)

这是默认值。stretch 算法简单地拉伸边框图像的边缘部分，使其完全填充边框。这意味着图像可能会变形，尤其是在边框宽度与原始图像尺寸不成比例时。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  height: 100px;
  border: 30px solid transparent;
  border-image-source: url("border.png");
  border-image-slice: 20;
  border-image-width: 30px;
  border-image-outset: 0;
  border-image-repeat: stretch; /* 拉伸 */
}
</style>
</head>
<body>

<div class="box">
  This is a box with stretch border.
</div>

</body>
</html>

在这个例子中，如果 border.png 的边缘部分的宽度小于 30px，那么这些边缘部分将被拉伸以填充 30px 的边框宽度。

2. repeat (重复)

repeat 算法通过重复边框图像的边缘部分来填充边框。如果边框的长度不是图像尺寸的整数倍，那么图像会被截断。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  height: 100px;
  border: 30px solid transparent;
  border-image-source: url("border.png");
  border-image-slice: 20;
  border-image-width: 30px;
  border-image-outset: 0;
  border-image-repeat: repeat; /* 重复 */
}
</style>
</head>
<body>

<div class="box">
  This is a box with repeat border.
</div>

</body>
</html>

如果 border.png 的边缘部分宽度为 15px，那么每个边缘部分将被重复两次以填充 30px 的边框宽度。如果边缘部分宽度为 22px，那么边缘部分将被重复一次，并被截断一部分。

3. round (环绕)

round 算法类似于 repeat，但它会调整边框图像的大小，以使其完整地重复，避免截断。这意味着图像可能会被稍微拉伸或缩小。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  height: 100px;
  border: 30px solid transparent;
  border-image-source: url("border.png");
  border-image-slice: 20;
  border-image-width: 30px;
  border-image-outset: 0;
  border-image-repeat: round; /* 环绕 */
}
</style>
</head>
<body>

<div class="box">
  This is a box with round border.
</div>

</body>
</html>

如果 border.png 的边缘部分宽度为 22px，round 算法会稍微调整边缘部分的宽度，使其能够完整地重复，例如调整为 15px 并重复两次。

4. space (留白)

space 算法也类似于 repeat，但它会在图像之间添加间距，以填充可用空间。图像本身不会被拉伸或截断。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  height: 100px;
  border: 30px solid transparent;
  border-image-source: url("border.png");
  border-image-slice: 20;
  border-image-width: 30px;
  border-image-outset: 0;
  border-image-repeat: space; /* 留白 */
}
</style>
</head>
<body>

<div class="box">
  This is a box with space border.
</div>

</body>
</html>

如果 border.png 的边缘部分宽度为 22px，space 算法会重复一次边缘部分，并在边缘部分和边框末端之间添加间距，使得总宽度为 30px。

border-image-repeat 的双值语法

border-image-repeat 属性还支持双值语法，允许你为水平和垂直方向分别指定重复方式。

border-image-repeat: <horizontal> <vertical>;

例如：

border-image-repeat: repeat stretch; /* 水平方向重复，垂直方向拉伸 */

实际应用案例

1. 创建可伸缩的按钮

9 宫格切片非常适合创建可伸缩的按钮，按钮的边角保持不变形，而边缘部分可以根据按钮的大小进行拉伸或重复。

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 15px solid transparent;
  border-image-source: url("button_border.png");
  border-image-slice: 15;
  border-image-width: 15px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
}
</style>
</head>
<body>

<a href="#" class="button">Click me</a>
<a href="#" class="button" style="padding: 15px 30px;">Click me - Longer</a>

</body>
</html>

在这个例子中，button_border.png 包含按钮边框的图像。通过使用 border-image-slice 和 border-image-repeat: stretch;，我们可以创建可伸缩的按钮，而按钮的边角始终保持清晰。

2. 创建对话框

9 宫格切片也可以用于创建具有自定义边框的对话框。

<!DOCTYPE html>
<html>
<head>
<style>
.dialog {
  width: 300px;
  height: 200px;
  border: 20px solid transparent;
  border-image-source: url("dialog_border.png");
  border-image-slice: 20;
  border-image-width: 20px;
  border-image-outset: 0;
  border-image-repeat: round;
  background-color: #f0f0f0;
  padding: 20px;
}
</style>
</head>
<body>

<div class="dialog">
  This is a dialog box with a custom border.
</div>

</body>
</html>

在这个例子中，dialog_border.png 包含对话框边框的图像。通过使用 border-image-slice 和 border-image-repeat: round;，我们可以创建具有自定义边框的对话框，边框图像会根据对话框的大小进行调整，以避免截断。

`border-image` 简写属性

为了方便起见，CSS 提供了 border-image 简写属性，可以将所有 border-image 相关的属性组合在一起：

border-image: <border-image-source> <border-image-slice> / <border-image-width> / <border-image-outset> <border-image-repeat>;

例如：

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

这个简写属性相当于以下代码：

border-image-source: url("border.png");
border-image-slice: 20;
border-image-width: 30px;
border-image-outset: 0;
border-image-repeat: stretch;

9宫格切片的优势

使用 9 宫格切片具有以下几个优势：

可伸缩性: 可以创建可伸缩的边框，而不会影响边角的清晰度。
灵活性: 可以使用任何图像作为边框，从而实现高度定制化的设计。
性能: 与使用多个元素和背景图像相比，使用 9 宫格切片通常具有更好的性能。

容易混淆的点

边框宽度与 border-image-width 的区别: border 属性设置的宽度是边框所占据的实际空间，必须设置为 transparent 才能显示 border-image。border-image-width 决定了边框图像的宽度。这两个值可以相同，也可以不同。
border-image-slice 的单位: border-image-slice 的值默认是像素值，也可以使用百分比。百分比是相对于图像尺寸而言的。
fill 关键字的影响: fill 关键字决定了中心区域是否被用作元素的背景。

小结：掌握切片，灵活定制边框

border-image-slice 是一个强大的CSS属性，它允许我们使用图片来创建可伸缩的边框。通过理解其填充逻辑和拉伸算法，我们可以实现各种各样的定制化设计。务必掌握 border-image-slice 和相关的属性，例如 border-image-source、border-image-width 和 border-image-repeat，才能充分利用它的强大功能。

更多IT精英技术系列讲座，到智猿学院