CSS 中的边框图像：Interop 2023 的一个关键重点领域

Interop 2023 是一项跨浏览器合作项目，旨在提高 Web 的互操作性——达到每个技术在所有浏览器中都能完全相同的状态。 (来源: Interop 2023)

在 Interop 2023 中，CSS 边框图像被确定为一个关键的关注领域。此功能允许您使用图像来样式化元素的边框，并且已在浏览器中支持多年。然而，浏览器之间的行为差异（正如 Web 平台问题中所强调的）导致 Web 开发人员在充分使用此功能时有所顾虑。随着边框图像被纳入 Interop 2023，人们重新致力于解决行为差异并鼓励广泛采用。这项举措强调了创建在不同浏览器中一致的、视觉上吸引人的网页设计的必要性。

边框图像的每个方面都可以使用特定的 border-image CSS 属性进行控制，所有这些属性都在 MDN 的参考页面上得到了广泛解释。在这篇文章中，我们将回顾所有与边框图像相关的长属性，并探讨如何自定义边框中的图像。

开始使用边框图像

CSS 中的边框图像允许您使用自定义图像作为网站元素边框，从而取代标准边框。这有多酷！它为您提供了一种独特而强大的方式来样式化并为您的网站添加个人创意。例如，假设您正在经营一家在线花店。您可以将花卉或自然图像用作您网站上各种元素的边框，从而为整个网站增添迷人的统一主题。

以下是成功将图像用作元素边框所涉及的所有步骤的摘要。第一步是指定您喜欢的图像的来源。接下来，您切片图像以指定将在边框中使用的部分。然后，您调整图像的宽度（即厚度），这将控制图像在边框区域内的缩放方式。如果您希望图像超出元素的边框，可以选择定义一个外延。最后，您决定图像如何适应或重复。这将定义图像是重复、拉伸还是调整以适应边框区域。通过遵循这些步骤，您可以有效地在网页设计中使用自定义图像作为元素边框。

我们将使用以下自然主题图像（来自 pixabay）来演示如何将其用作边框图像。

Nature-themed image with a repeating pattern of yellow flowers, yellow and green leaves, and brown branches with green leaves on a white background.

另外，供参考，下面的框代表我们要添加边框图像的元素。粗绿色的边框区域将由我们的图像替换。浅黄色背景色代表内容和内边距框。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
  border: 30px solid green;
}

指定图像

您可以使用 border-image-source 属性指定边框图像的来源。与 background-image 类似，此属性接受图像文件的 URL 或渐变，并将其应用于框的边框。您可以使用各种图像格式，如 PNG、JPG 或 SVG。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
}

css

.box {
  border: 30px solid transparent;
  border-image-source: url("https://mdn.org.cn/en-US/blog/border-images-interop-2023/nature.png");
}

您会在此阶段注意到，图像仅出现在框的角部。不是我们期望的，对吧？这只是第一步，离自定义边框中图像的外观还有几步之遥。图像需要使用其他 border-image 属性值进一步处理才能呈现最终的边框外观 — 在这一点上，我们缺少关于如何切片或在边框上分布图像的说明。

您会在上面的代码中注意到，除了边框图像之外，border-width 和 border-style 都已使用 border 简写属性定义。这是因为只有当元素具有定义的边框时，border-image 属性才会可见。border-width 属性设置边框图像的可用空间，而 border-style 属性确保边框图像正确显示。没有 border-width 和 border-style，无论您设置什么 border-image 属性，边框图像都不会显示。

切片图像

切片有助于我们定义将在元素边框的角部和侧边显示的图像部分。这就像把蛋糕切成片，每块都有自己的位置。

您可以使用 border-image-slice 属性来切片图像。此属性使用四条虚线来切片图像，这些虚线距离相应边缘的切片距离指定。这四条切片线有效地将图像分为九个区域：四个角、四个边缘和中间。这些线决定了将用于边框的图像区域的大小。

例如，所有侧面的切片值为 30，切片区域将如下图右侧图像所示。

Screenshot with two images. The left image is the same nature-themed image showing slice lines at 30 units from all four edges. The right image shows an empty middle region that is removed after slicing.

使用此值 30，上面显示的切片区域未能从图像中捕获足够的区域，至少没有捕获我们真正希望在边框中显示的区域。大多数叶子和花朵都被截断了。在下面的代码中，让我们使用一个更高的值，例如 70，来切片图像看看效果。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
}

css

.box {
  border: 30px solid transparent;
  border-image-source: url("https://mdn.org.cn/en-US/blog/border-images-interop-2023/nature.png");
  border-image-slice: 70;
}

这看起来好多了，图像的更理想区域显示在边框中。正如您所能看到的，此步骤的结果将取决于您使用的图像。所以一定要探索不同的切片设置。请注意，是我们将上面显示的绿色边框区域替换为我们的自定义图像。

您可以在 border-image-slice 值中指定另一个选项。默认情况下，切片操作会丢弃图像的中间部分。但是，如果您想保留它，可以在值中添加 fill，例如 border-image-slice: 70 fill;。这将把边框图像绘制在中间区域的背景之上。

调整宽度

在下一步中，让我们决定边框图像的厚度。这将决定边框图像在边框区域内的缩放方式。我们使用 border-image-width 属性来设置边框图像的宽度。它定义了边框图像从边框边缘向内的偏移量。

您可以通过下面的图像看到将宽度设置为 10px 的效果。在此宽度下，边框中的图像被拉伸得很厉害。

Screenshot with two images. The nature-themed image on the left shows slice lines at 70 units from all four edges. The right image shows a stretched out border image and empty middle region.

让我们尝试将图像的宽度增加到 30px。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
}

css

.box {
  border: 30px solid transparent;
  border-image-source: url("https://mdn.org.cn/en-US/blog/border-images-interop-2023/nature.png");
  border-image-slice: 70;
  border-image-width: 30px;
}

在此宽度下，边框图像的缩放效果更好。

您可能会认为我们在切片部分的结尾也得到了这个输出。那么添加 border-image-width 有什么帮助呢？输出看起来是一样的，因为当 border-image-width 属性未指定时（切片部分就是这种情况），浏览器使用初始值 1。这意味着边框图像的宽度将等于相应 border-image-slice 的内在宽度或高度（以适用者为准）。如果图像没有所需的内在尺寸，则使用相应的 border-width。

让我们也花点时间确保我们理解 border-image-width 和 border-width 属性的目的。border-image-width 属性定义了边框图像的宽度或厚度，而 border-width 属性定义了元素周围边框的宽度。因此，border-image-width 决定了边框图像在此分配的边框区域内的缩放方式。考虑以下情况：

如果 border-image-width 大于 border-width，则边框图像将超出内边距，甚至可能超出内容框边缘。
如果 border-image-width 小于 border-width，则图像可能无法填充整个边框区域。但是，图像可能会出现失真或缩小，因为它被挤压到较小的空间中。

使图像超出边框

有时，您可能希望您的边框图像超出元素的边框框，几乎像为设计增加更多深度一样。这就像决定蛋糕上的糖霜应该溢出多少。这时 border-image-outset 属性就派上用场了。尽管属性的指定顺序不严格，但 border-image-outset 通常在 border-image-width 属性之后指定。

这是外延值 10px（左侧）和 20px（右侧）的并排比较。这些图像中的边框已突出显示（使用浏览器检查器工具中的盒子模型部分）以演示边框图像在边框区域外的扩展。

A border image extending beyond the border area

继续我们的示例，我们将为 border-image-outset 使用 10px 的值。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
}

css

.box {
  border-width: 30px; /* Width of the border area */
  border-style: solid;
  border-image-source: url("https://mdn.org.cn/en-US/blog/border-images-interop-2023/nature.png");
  border-image-slice: 70;
  border-image-width: 30px; /* Width of the border image */
  border-image-outset: 10px; /* Extension of the border image beyond the border area */
}

根据上面的代码，边框图像将显示为 30px 的宽度，该宽度在元素由 border-width 定义的边框区域内。border-image-outset 值指定边框图像将超出边框框 10px。此扩展是 border-image-width 指定的宽度的附加部分。边框及其外延所占的总宽度将为 40px（边框为 30px，外延额外 10px）。

较大的外延值可以使边框看起来像是漂浮在元素周围，而较小的外延则使边框图像更受限制。

控制布局

我们现在非常接近于在边框中获得最终的图像外观。由于我们使用的特定图像以及为切片和宽度指定的值，该元素的边框已经类似于最终期望的外观。但是，您还有一个用于最终布局调整的旋钮。在最后一步中，您定义了图像的切片部分如何在边框周围布局 — 即，它们是应该重复、拉伸还是调整以适应边框区域。border-image-repeat 属性对此有所帮助。此属性通常在 border-image 属性中最后指定，因为它处理边框图像在元素中的最终布局。

为了使图像围绕边框重复，使其完美贴合而不被裁剪，请使用 round 值。图像部分可能会被拉伸以实现完美贴合。
为了在完美贴合的情况下添加额外的空间而不是拉伸，请使用 space 值。
为了拉伸图像以填充边框区域而不重复图像，请使用 stretch 值。
repeat 值将图像在边框上重复，如果它不能完美贴合边框区域，可能会被裁剪。

您甚至可以通过为 border-image-repeat 指定两个值来为水平（顶部和底部）和垂直（左侧和右侧）侧定义不同的布局和缩放。作为练习，尝试探索使用所有侧面相同值与水平和垂直侧面不同值之间的外观差异。

在这里，我们将 round 用于我们的示例，以使图像完美贴合边框。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
}

css

.box {
  border: 30px solid transparent;
  border-image-source: url("https://mdn.org.cn/en-US/blog/border-images-interop-2023/nature.png");
  border-image-slice: 70;
  border-image-width: 30px;
  border-image-outset: 10px;
  border-image-repeat: round;
}

好了，瞧！一张我们喜欢的精美图片，或者一张与我们网站主题相符的图片，用作我们可以在网站设计中使用的元素的边框。

使用 `border-image` 简写属性

我们可以使用简写的 border-image 属性一次性设置所有这些属性。

下面的代码使用简写的 border-image 属性同时设置多个边框图像属性，包括 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat。任何未指定的您没有指定的值都将设置为该属性的初始值。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
}

css

.box {
  border: 30px solid transparent;
  border-image: url("https://mdn.org.cn/en-US/blog/border-images-interop-2023/nature.png")
    70 / 30px / 10px round;
}

Interop 2023 及以后

作为 Interop 2023 关注 CSS 边框图像的一部分，人们正在大力提高跨浏览器兼容性和标准化行为。随着浏览器开发人员致力于实现一致的边框图像行为，我们希望本文能激发或重燃您对未来网页项目探索边框图像的兴趣。

现在是探索此功能创意潜力的绝佳时机！我们期待听到您的想法和建议，并乐于看到您的创作。欢迎通过 Mastodon 或 Discord 与我们分享。

其他资源

要交互式地探索各个 border-image 属性并检查它们之间的相互作用，请查看 MDN 上的边框图像生成器工具。您可以上传任何图像并查看各种 border-image 属性的效果。