CSS属性参考 | border-image-repeat

04-29 次

标签 css教程 css属性边框边框图像

border-image-repeat属性用于指定边框图像的切片中，边部切片和中心块切片如何进行缩放和平铺。

通过border-image-slice属性，可以将一个边框图像切割为9个部分，如下图所示：

CSS border-image-slice属性将边框图片切割为9部分后的示意图

如果为border-image-slice属性设置了fill关键字，那么边框图像切片的中心块部分就可以作为元素的背景图像使用。4条边部切片会分别被应用到元素的4个边框中。

border-image-repeat属性用于指定上图中边1-边4的4条边部切片，以及中心块切片如何进行缩放和重复平铺。

你可以设置使这些切片在相应的区域中重复平铺，也可以设置将切片拉伸来填充整个区域。

border-image-repeat属性可以使用一个关键字作为值，也可以使用2个关键字作为值。第一个关键字代表水平方向的边（上和下边部），第二个关键字代表垂直方向的边（左和有边部）。如果没有指定第二个关键字，那么第二个关键字和第一个关键字相同。

官方语法

border-image-repeat: [ stretch | repeat | round | space ]{1,2}

参数：

stretch：切片图像会被拉伸来填充整个区域。如果它是第一个关键字，那么顶部，中心块和底部的边框图像切片将被水平拉伸填充整个区域。如果它是第二个关键字，那么左侧，中心块和右侧图像切片将垂直拉伸填充整个区域。
repeat：图像切片重复平铺整个区域。如果它是第一个关键字，那么顶部，中心块和底部的边框图像切片将在各自的区域中水平居中，并且在水平方向上重复平铺。如果它是第二个关键字，那么左侧，中心块和右侧的边框图像切片将在各自的区域中垂直居中，并且在垂直方向上重复平铺。
round：和repeat效果相同，也会对边框图像的切片做相应的重复平铺。不同的是如果最后一个平铺切片不能完整的显示，它会重新计算所有切片的尺寸，使所有的切片都可以完整的显示。
space：和repeat效果相同，也会对边框图像的切片做相应的重复平铺。不同的是如果最后一个平铺切片不能完整的显示，它会调整各个切片之间的距离，使所有的切片都可以完整的显示。

border-image-repeat属性的初始值是：stretch。

示例代码

下面是border-image-repeat属性的一些取值的示例代码：

border-image-value: stretch;

/* border-image-repeat: 水平方向 垂直方向 */
border-image-width: round stretch;

/* 全局值 */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;