mask-border

Limited availability

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

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

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

语法

css
/* 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 = 
<'mask-border-source'> ||
<'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? ||
<'mask-border-repeat'> ||
<'mask-border-mode'>

<mask-border-source> =
none |
<image>

<mask-border-slice> =
[ <number> | <percentage> ]{1,4} fill?

<mask-border-width> =
[ <length-percentage> | <number> | auto ]{1,4}

<mask-border-outset> =
[ <length> | <number> ]{1,4}

<mask-border-repeat> =
[ stretch | repeat | round | space ]{1,2}

<mask-border-mode> =
luminance |
alpha

<image> =
<url> |
<gradient>

<length-percentage> =
<length> |
<percentage>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

示例

Bitmap

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

HTML

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 ,该属性使得切片均匀贴合,例如:没有裁剪和空隙。

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

  mask-border: url("mask-border-diamonds.png") 30 / 36px 18px round;
}

结果

规范

Specification
CSS Masking Module Level 1
# the-mask-border
初始值该简写所对应的每个属性:
适用元素all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
是否是继承属性
Percentages该简写所对应的每个属性:
计算值该简写所对应的每个属性:
动画类型该简写所对应的每个属性:
Creates stacking context

浏览器兼容性

BCD tables only load in the browser