Title text reading Border images in CSS: A key focus area for Interop 2023. A vibrant gradient behind artwork of computer monitor with code in the top right corner and a stylized border image in the bottom left corner.

CSS 中的边框图像：Interop 2023 的重点关注领域

Dipika Bhattacharya2023 年 12 月 19 日阅读时间：10 分钟

Interop 2023 是一项跨浏览器努力，旨在提高 Web 的互操作性——达到每项技术在每个浏览器中都完全相同的效果。（来源：Interop 2023）

在 Interop 2023 中，CSS 边框图像被确定为一个重点关注领域。此功能允许您使用图像为元素的边框设置样式，并且已经在浏览器中支持多年。但是，浏览器之间的行为差异（如此 Web 平台问题中突出显示的那样）导致一些 Web 开发人员不愿充分利用此功能。随着边框图像被纳入 Interop 2023，人们重新致力于解决行为差异并鼓励广泛采用。该计划突出了能够创建在不同浏览器中保持一致的视觉吸引力的 Web 设计的重要性。

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

边框图像入门

CSS 中的边框图像允许您使用自定义图像作为网站上元素周围的边框，从而替换标准边框。这太酷了！这为您提供了一种独特而强大的方法来设置样式并为您的网站添加个人创意风格。例如，假设您经营一家在线花店。您可以使用花卉或自然图像作为网站上各种元素的边框，以在整个网站中添加迷人且统一的主题。

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

我们将使用以下自然主题图像（由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 边框图像的关注的一部分，正在做出重大努力来增强跨浏览器兼容性并标准化行为。随着浏览器开发人员致力于实现一致的边框图像行为，我们希望这篇文章能激发或重新激发您在未来的 Web 项目中探索边框图像的兴趣。

现在是探索此功能创意可能性的绝佳时机！我们期待听到您的想法和意见，并很乐意看到您创作的内容。请随时在 Mastodon 或 Discord 上与我们分享。

其他资源

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

CSS 中的边框图像：Interop 2023 的重点关注领域

边框图像入门

指定图像

切分图像

调整宽度

将图像扩展到边框之外

控制布局

使用`border-image`简写属性

Interop 2023 及以后

其他资源

上一篇使用 OpenLLM 和 Vultr 云 GPU 构建 AI 驱动的应用程序

下一篇利用 Vultr 上的 Bun：一种更优秀的 Node.js 替代方案

CSS 中的边框图像：Interop 2023 的重点关注领域

上一篇 使用 OpenLLM 和 Vultr 云 GPU 构建 AI 驱动的应用程序

下一篇 利用 Vultr 上的 Bun：一种更优秀的 Node.js 替代方案

关注 MDN 的最新资讯

上一篇使用 OpenLLM 和 Vultr 云 GPU 构建 AI 驱动的应用程序

下一篇利用 Vultr 上的 Bun：一种更优秀的 Node.js 替代方案