border-image

时间 2019-11-09

标签 border image 繁體版

原文原文链接

border-image是一种简写属性，可以让您使用图像或CSS渐变做为元素的边框。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。svg

border-image-slice

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

此属性的值告诉浏览器在哪里“切片”图像以建立边框。图像分为9个部分-四个角，四个边和中心。动画

带有以红色标记的切片线的边框图像(放大以显示细节)。编码

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

无单位数字经过光栅图像上的像素和SVG上的坐标来测量切片。百分比值是相对于图像尺寸的。例如，在100px x 100px的光栅图像上，距图像任何一侧的10%为10px。有关百分好比何在SVG图像上工做的更多信息，请参见SVG上的使用说明。spa

这些值从图像的顶部，右侧，底部和左侧边缘开始测量(按此顺序)。若是缺乏一个值，则其值将默认为其另外一侧的值-例如，若是缺乏左侧的值，但右侧的值设置为10px，左侧的值也将变为10px。

默认状况下，源图像的中心被丢弃。可是，当使用fill关键字时，它将改成应用于边框元素的背景。（注：仍然可使用background-image属性，该属性产生的背景图片位于由fill关键字产生的“背景图片”的下方，会被"fill背景图片"覆盖掉（若是border-image-source引用的图片没有透明部分的话）。）

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是八个相同心脏图标的合成图像，将它们切成切片，以便在元素的每一侧使用完整的心脏形状。