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

本文翻译自 Border images in CSS: A key focus area for Interop 2023，作者：Dipika Bhattacharya， 略有删改。

Interop 2023 是一项提高 Web 的互操作性为目标，以达到每种技术在各浏览器中完全相同的状态。（来源：Interop 2023）

在 Interop 2023 中，CSS 图像边框被确定为一个关键的重点领域。这个特性允许您使用图像来设置元素边框的样式，浏览器已经支持这个特性很多年了。然而浏览器之间的行为差异导致 Web 开发人员不愿意完全使用此功能。随着 Interop 2023 中包含图像边框，重新承诺解决行为差异并鼓励广泛采用。这一举措强调了能够创建在不同浏览器之间保持一致的视觉吸引力的网页设计的重要性。

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

开始使用边框图像

CSS 中的边框图像允许您使用自定义图像作为网站上元素的边框，取代标准边框。这为您提供了一种独特而强大的方式来设计和添加您的个人创意风格到您的网站。例如，想象一下你正在经营一家在线花店。您可以使用花卉或自然图像作为网站上各种元素的边界，以增加整个网站的主题风格。

本文总结了使用图像作为元素边框的所有步骤。第一步是指定您喜欢的图像的来源。然后将图像切片以指定要在边框中使用的部分。接下来调整图像的宽度，这将控制图像在边框区域内的缩放方式。如果您希望图像延伸到元素的边界之外，则可以选择定义起点。最后决定图像如何在边框周围拟合或重复。这将定义图像是否重复、拉伸或调整以适应边界区域。通过遵循这些步骤，您可以有效地使用自定义图像作为网页设计中的元素边框。

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

作为参考，下面的框表示我们要添加边框图像的元素。厚的绿色边界区域是我们将用图像替换的区域。浅黄色背景色表示内容框和填充框。

指定边框图像

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

.box {  border: 30px solid transparent;  border-image-source: url("https://developer.mozilla.org/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，切片区域将如下图所示：

使用 30 的切片值上面显示的切片区域没有从图像中捕获足够的部分，至少不是我们真正想要在边界中显示的部分。大部分的叶子和花都被剪掉了。在下面的代码中，让我们使用一个更高的值，比如 70，对图像进行切片，看看效果如何。

.box {  border: 30px solid transparent;  border-image-source: url("https://developer.mozilla.org/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 的效果。在这个宽度上，边框中的图像变得非常拉伸。

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

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

在这个宽度下，边框图像看起来更好。

让我们在这里花点时间来确保我们理解了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（右侧）的并排比较。这些图像中的边框已高亮显示，以演示边框图像在边框区域外的扩展。

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

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

基于上面的代码，边框图像将以 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 来完美地适应图像的边界。

.box {  border: 30px solid transparent;  border-image-source: url("https://developer.mozilla.org/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。任何未指定的值都将被设置为属性的初始值。

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

Interop 2023 及以后

作为 Interop 2023 对 CSS 边框图像的关注的一部分，正在做出重大努力来增强跨浏览器兼容性并标准化行为。浏览器开发人员承诺实现一致的边框图像行为，我们希望这篇文章能激发或更新您在未来 Web 项目中探索边框图像的兴趣。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）