border-image

2019-09-26 12:56:57 阅读：184 来源： 互联网

border-image是一种简写属性，可让您使用图像或CSS渐变作为元素的边框。

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

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

属性

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

border-image-source

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

此属性指定边框图像的来源。这可以是URL，数据URI，CSS渐变或嵌入式SVG(尽管对嵌入式SVG的支持受到限制，请参阅SVG使用说明)。

初始值为none。

border-image-slice

.module {
  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

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

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

这些值用于元素的顶部，右侧，底部和左侧(按此顺序)。如果缺少一个值，则将其绘制为对立边的值。

对于此属性，百分比值是相对于边框图像区域的大小而言的，而无单位数则乘以边框宽度(border-width)。

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

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

border-image-outset

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

此属性的值指定边框图像区域超出边框超出的距离。初始值为0。该属性最多接受四个正长度值或无单位数。长度值是绝对测量值，而无单位数与边框宽度相乘以计算初始值，类似于无单位数对边框图像宽度的工作方式。

border-image-repeat

.module {
  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值(包含空格仅出于将来的兼容性;目前尚无法在任何浏览器中指定该空格)：

边框图像使用渐变

所有支持边框图像的浏览器也都支持CSS渐变。您可以使用任何类型的渐变来制作边框。此演示演示了重复的线性渐变，形成了条纹边框(将其悬停以查看条纹颜色交换)。

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

边框图像使用SVG

将光栅图像和SVG用于border-image之间的最大区别在于切片的测量方式。

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

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

如果SVG没有定义的尺寸，则使用默认的尺寸调整算法对其进行尺寸调整，该算法将使用border-image-outset设置的边框图像区域作为默认尺寸。在实践中这可能会造成混淆，因此在可能的情况下为SVG设置大小会有所帮助。

图片来源URL中的SVG

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

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

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

内联

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

Base64 SVG有很多问题值得推荐：也许不要Base64 SVG。

将SVG图像标记直接写入border-image声明中也很复杂; Internet Explorer无法识别它，并且在Firefox中的支持很奇怪(请参阅Bug 619500)。

本演示中的边框图像是嵌入式SVG渐变。如果您查看“ CSS”选项卡，您会注意到标记必须精心组合-请注意标记周围的双引号，标记内的单引号以及十六进制颜色的转义“井”(#)字符。

制作单个重复图像的边框

用一个单一的重复图像为元素加上边框似乎很容易，因为它具有称为border-image的属性，但是实际执行此操作的过程有些违反直觉。

举例来说，假设您想将元素环绕重复的心形图标。你无法做到只有一颗心的图像。相反，您必须制作一个心形“框架”的图像，并按照您希望它们出现在边框中的顺序排列，然后对该图像进行切片。

“框架”图像中的八个心形，放大以显示细节。红线表示切片。

如果您认为这听起来很荒谬，那么您此道不孤。几年前，埃里克·迈尔(Eric Myer)的博客上对该主题进行了长篇的论述，许多前端开发专家对此进行了讨论。

在此演示中，心脏围绕div的边界重复。border-image-source是八个相同心脏图标的合成图像，将它们切成切片，以便在元素的每一侧使用完整的心脏形状。

ICode9