关于前端: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）