mask-border-repeat

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

语法

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

/* vertical | horizontal */
mask-border-repeat: round stretch;

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

可以从下面的列表中选择一个或两个值来指定 mask-border-repeat 属性。

  • 指定一个值时，它会在四个边应用相同的行为。
  • 指定两个值时，第一个应用于顶部和底部，第二个应用于左侧和右侧。

Values

stretch

拉伸源图像的边缘区域以填充每个边界之间的间隙。

repeat

源图像的边缘区域被平铺（重复）以填充每个边界之间的间隙，可以裁剪平铺图形以达到合适的贴合效果。

round

源图像的边缘区域被平铺（重复）以填充每个边界之间的间隙，可以拉伸平铺图形以实现适当的贴合。

space

源图像的边缘区域被平铺（重复）以填充每个边框之间的间隙。平铺图形之间将分配额外的空间，以实现适当的贴合。

正式语法

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

规范

Specification
CSS Masking Module Level 1
# the-mask-border-repeat
初始值stretch
适用元素all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
是否是继承属性否
计算值as specified
Animation typediscrete

浏览器兼容性

BCD tables only load in the browser