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
初始值stretch
适用元素all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
是否是继承属性
计算值as specified
动画类型离散值

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-border-repeat

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.