border-image

border-image 是一个简写属性，它允许您使用图像或 CSS 渐变作为元素的边框。

border-image 属性可以应用于任何元素，除了当 border-collapse 设置为 collapse 时，内部表格元素（例如 tr、th、td）除外。

.element {
  border-image: url(border.png) 25 25 round;
}

语法

border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

属性

border-image 简写的唯一必需属性是 border-image-source。 如果未指定其他属性，则它们将默认为其初始值。 这些是按顺序排列的 border-image 属性

border-image-source

.element {
  border-image-source: url(border.png);
}

此属性指定边框图像的源。 它可以是 URL、数据 URI、CSS 渐变或内联 SVG（尽管对内联 SVG 的支持有限，请参阅 SVG 使用说明）。

初始值为 none。

border-image-slice

.element {
  border-image-source: url(border.png);
  border-image-slice: 20;
}

此属性的值告诉浏览器在哪里“切片”图像以创建边框的片段。 图像被分成 9 个部分——四个角、四个边和中心。

该属性接受最多四个无单位的正数或百分比，以及一个可选的 fill 关键字。 初始值为 100%。

无单位的数字使用光栅图像上的像素进行测量，使用 SVG 上的坐标进行测量。 百分比值相对于图像的大小。 例如，对于 100px x 100px 的光栅图像，从图像任一侧的 10% 为 10px。 有关百分比在 SVG 图像上的工作方式，请参阅 SVG 使用说明。

这些值从图像的顶部、右侧、底部和左侧边缘测量（按此顺序）。 如果缺少一个值，它的值将默认为其对侧的值——例如，如果缺少左侧值，但右侧值设置为 10px，则左侧值也将变为 10px。

默认情况下，源图像的中心会被丢弃。 但是，当使用 fill 关键字时，它将应用于带边框元素的背景而不是。

border-image-width

.element {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 20;
}

此属性设置边框图像的宽度。 它接受百分比值、无单位的正数或关键字 auto。

这些值用于元素的顶部、右侧、底部和左侧（按此顺序）。 如果缺少一个值，它将与它的对侧值一样绘制。

对于此属性，百分比值相对于边框图像区域的大小，而无单位的数字将乘以 border-width。

初始值为 1，因此，如果未设置此值，但元素存在 border 或 border-width 声明，则边框图像将以该宽度绘制。

auto 关键字告诉浏览器使用 border-image-slice 的大小（如果可用），或者使用 border-width 的大小。

border-image-outset

.element {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 20;
  border-image-outset: 1;
}

此属性的值指定边框图像区域超出边框框的距离。 初始值为 0。 该属性接受最多四个正 长度值 或无单位的数字。 长度值是绝对测量值，而无单位的数字将乘以边框宽度以计算突出的值，类似于无单位的数字如何在 border-image-width 中工作。

border-image-repeat

.element {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 20;
  border-image-outset: 1;
  border-image-repeat: round;
}

此属性控制图像如何重复以填充边框区域。

您可以为此属性指定最多两个值。 如果指定一个值，它将应用于边框的水平和垂直两侧。 如果指定两个，则第一个应用于水平侧，第二个应用于垂直侧。

值

• stretch：初始值。 边框图像将根据需要拉伸以填充区域。
• repeat：图像平铺以填充区域，必要时划分平铺。
• round：图像平铺以填充区域，必要时重新缩放以避免划分平铺。
• space：图像平铺以填充区域。 如果区域无法用完整的平铺填充，则在平铺周围插入间距以进行均匀拟合。 注意：此值尚未由任何浏览器实现。

在此演示中尝试不同的 border-image-repeat 值（space 仅出于未来兼容性目的而包含；它在任何浏览器中都无法按指定的方式工作）

渐变边框图像

所有支持 border-image 的浏览器也支持 CSS 渐变。 您可以使用任何类型的渐变来创建您的边框。 此演示显示了一个重复的线性渐变，它创建了一个条纹边框（将鼠标悬停在上面以查看条纹颜色交换）。

浏览器将像切片宽度和高度等于 border-image-width 的方形图像一样切片渐变。

SVG 边框图像

使用光栅图像和 SVG 进行 border-image 之间最大的区别在于如何测量切片。

无单位的值表示 SVG 图像上的坐标。

百分比值相对于图像的大小。

如果 SVG 没有定义大小，它将使用 默认大小调整算法 进行大小调整，该算法将使用 border-image-outset 设置的边框图像区域作为默认大小。 这在实践中可能会令人困惑，因此，如果可能，最好为 SVG 设置大小。

在图像源 URL 中使用 SVG

您可以像链接光栅图像一样将 SVG 文件链接为 border-image-source

.element {
  border-image-source: url(border.svg);
}

这可能是使用 SVG 作为边框图像的最佳方法。它得到了很好的支持 - 所有支持 border-image 的现代浏览器都将接受链接的 SVG 作为 border-image-source。

内联

您可以对 SVG 边框图像进行 Base64 编码，或将 SVG 标记直接写入边框图像源，但这两种方法都有相当严重的问题。

Base64 SVG 存在足够多的问题，值得专门写一篇文章来讨论：可能不应该对 SVG 进行 Base64 编码。

将 SVG 图像标记直接写入 border-image 声明也会带来复杂性；Internet Explorer 无法识别它，而 Firefox 中的支持也有些奇怪（参见 Bug 619500）。

此演示中的边框图像是一个内联 SVG 渐变。如果您查看“CSS”选项卡，您会注意到标记必须仔细编写 - 请注意标记周围的双引号、标记内部的单引号以及十六进制颜色中的转义井号（#）字符。

单一重复边框图像

用单个重复图像对元素进行边框处理，这听起来应该很容易，只需要使用一个名为 border-image 的属性，但实际操作的过程却有点违反直觉。

例如，假设您想用重复的爱心图标对元素进行边框处理。您不能使用单个爱心图像来实现。相反，您必须制作一个爱心“框架”图像，将爱心按照您希望它们在边框中出现的方式排列，然后切片该图像。

如果您觉得这听起来很荒谬，那么您并不孤单。几年前，Eric Myer 的博客上对这个话题进行了长时间的讨论，许多前端开发高手都参与了讨论。

在本演示中，爱心围绕着 div 的边框重复。border-image-source 图像是一个复合图像，包含八个相同的爱心图标，它们被切片，以便在元素的每一侧都使用完整的爱心形状。

其他说明

虽然对 border-image 的支持有所改善 - 它在所有当前的浏览器版本中都得到了无前缀支持 - 但设置一个回退 border 样式仍然是有意义的。您的回退边框将在不支持 border-image 的浏览器中显示，或者在图像加载失败时显示。

与其他一些边框属性不同，border-image 无法进行动画。它也不能用 border-radius 进行样式设置。

如果您声明了一个 border-image-source 和一个 border 宽度或 border-image-width 而不进行任何切片，则整个未切片的图像将放置在元素的四个角上，并根据您指定的宽度进行缩放。

演示

• 同样来自 Dudley Storey 的 实用的边框图像：响应式图片框架，这是一个 CodePen 演示。这是一个在响应式图像上合理使用边框图像的很好的例子。请注意，在较小的屏幕尺寸下，“框架”被移除。
• 使用 SVG 和边框图像创建真正的点状边框，这是 Lucas Lemonnier 的一个 Pen。这是一个解决丑陋的方形“点状”边框的方案，这种方法可以创建真正的圆形点！
• 渐变按钮，这是 CodePen 用户 GSSxGSS 的一个 Pen。一个线性渐变作为边框图像的漂亮示例。
• 胶片带，这是 Nick Pettit 的一个 Pen。也许这不是最实用的演示，但它是一个有趣且艺术化的例子，展示了您可以用 border-image 做些什么。

更多信息

• CSS 背景和边框模块级别 3（候选推荐）
• border-image.com：此工具允许您上传图像并玩边框切片，直到得到正确的结果，然后它会为您生成 CSS。
• 边框图像解释（Dudley Storey）

浏览器支持

相关