1. Web
  2. CSS
  3. mask-border-repeat

mask-border-repeat

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

mask-border-repeat CSS 属性指定了 mask border image 的侧边和中间部分的图像如何进行缩放和平铺。

语法

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 蒙版模块 Level 1
# the-mask-border-repeat

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者 于 修改。

在 GitHub 上查看此页面 • 报告此内容存在的问题
© . Content available under a Creative Commons license.