这篇翻译不完整。请帮忙从英语翻译这篇文章

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

CSS 属性 mask-border 允许你创建一个紧贴元素边框边缘的mask.

该属性为以下属性的简写mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, and mask-border-mode. 与其他简写的属性一样,任何一个漏写的子属性,将会被设置为他们的初始值.

语法

/* source | slice */
mask-border: url('border-mask.png') 25;

/* source | slice | repeat */
mask-border: url('border-mask.png') 25 space;

/* source | slice | width */
mask-border: url('border-mask.png') 25 / 35px;

/* source | slice | width | outset | repeat | mode */
mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;

Values

<'mask-border-source'>
该属性为源图像. 参见 mask-border-source.
<'mask-border-slice'>
将源图像切割后的区域的尺寸,最多可指定四个值. 参见 mask-border-slice.
<'mask-border-width'>
边框mask的宽度. 最多可指定四个值. 参见 mask-border-width.
<'mask-border-outset'>
边框mask距离元素外边界的距离. 最多可指定四个值. 参见 mask-border-outset.
<'mask-border-repeat'>
定义如何调整源图像的边缘区域以适应边框mask的尺寸. 最多可指定四个值. 参见 mask-border-repeat.
<'mask-border-mode'>
定义是否将源图片设置为明亮度mask,或者透明度mask. 参见 mask-border-mode.

形式语法

<'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>

范例

Bitmap

在此范例中,我们将使用钻石图案来给元素添加mask. mask的源文件是一个 ".png" 文件,大小为 90像素 * 90 像素,三颗钻石垂直和水平交叉;

HTML

<div id="bitmap">This element is surrounded by a bitmap-based mask border! Pretty neat, isn't it?</div>

CSS

为了适应一个钻石的大小,我们使用90/3 或者30,用于设置将图像切割至边角以及边缘区域的值,并设置repeat属性为 round ,该属性使得切片均匀贴合,例如:没有裁剪和空隙.

div {
  width: 200px;
  background-color: lavender;
  border: 18px solid salmon;
  padding: 10px;

  mask-border:
    url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png")  /* source */
    30 /         /* slice */
    36px 18px    /* width */
    round;       /* repeat */
}

Result

Specifications

Specification Status Comment
CSS Masking Module Level 1
mask-border
Candidate Recommendation Initial definition

初始值as each of the properties of the shorthand:
适用元素all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
是否是继承属性
Percentagesas each of the properties of the shorthand:
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
正规顺序per grammar
Creates stacking contextyes

浏览器兼容性Edit

TBD

文档标签和贡献者

此页面的贡献者: mdnwebdocs-bot, BingLee1994
最后编辑者: mdnwebdocs-bot,