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

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
源图像的边缘区域被平铺(重复)以填充每个边框之间的间隙。平铺图形之间将分配额外的空间,以实现适当的贴合。

正式语法

[ stretch | repeat | round | space ]{1,2}

规范

规格 状态 解释
CSS Masking Module Level 1
mask-border-repeat
Candidate Recommendation 初始偏差
初始值stretch
适用元素all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序per grammar

浏览器兼容性

TBD

文档标签和贡献者

此页面的贡献者: kangour
最后编辑者: kangour,