mask-border-repeat

**mask-border-repeat** CSS 属性设置 源图像的边缘区域 如何调整以适应元素的 遮罩边框 的尺寸。

语法

css
/* Keyword value */
mask-border-repeat: stretch;
mask-border-repeat: repeat;
mask-border-repeat: round;
mask-border-repeat: space;

/* top and bottom | left and right */
mask-border-repeat: round stretch;

/* Global values */
mask-border-repeat: inherit;
mask-border-repeat: initial;
mask-border-repeat: revert;
mask-border-repeat: revert-layer;
mask-border-repeat: unset;

mask-border-repeat 属性可以使用以下值列表中的一个或两个值来指定。

  • 当指定 **一个** 值时，它将对 **所有四边** 应用相同的行为。
  • 当指定 **两个** 值时，第一个值应用于 **上边和下边**，第二个值应用于 **左边和右边**。

值

stretch

源图像的边缘区域将拉伸以填补每个边框之间的间隙。

repeat

源图像的边缘区域将平铺（重复）以填补每个边框之间的间隙。平铺可能会被裁剪以实现正确的拟合。

round

源图像的边缘区域将平铺（重复）以填补每个边框之间的间隙。平铺可能会被拉伸以实现正确的拟合。

space

源图像的边缘区域将平铺（重复）以填补每个边框之间的间隙。额外的空间将在平铺之间分配以实现正确的拟合。

正式定义

初始值stretch
应用于所有元素；在 SVG 中，它应用于容器元素，不包括 <defs> 元素和所有图形元素
继承否
计算值如指定
动画类型离散

正式语法

mask-border-repeat = 
  [ stretch | repeat | round | space ]{1,2}

示例

基本用法

该属性似乎还没有在任何地方得到支持。当它最终开始得到支持时，它将用于定义边框遮罩切片如何围绕边框重复 - 也就是说，它只是重复，还是稍微缩放以使整个切片数量适合，或者拉伸以使一个切片适合？

css
mask-border-repeat: round;

基于 Chromium 的浏览器支持该属性的过时版本 - mask-box-image-repeat - 带有前缀

css
-webkit-mask-box-image-repeat: round;

注意：mask-border 页面提供了一个工作示例（使用 Chromium 支持的过时带前缀的边框遮罩属性），因此您可以了解其效果。

规范

规范
CSS 遮罩模块级别 1
# the-mask-border-repeat

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅