mask-border-repeat

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

语法

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

浏览器兼容性

BCD tables only load in the browser