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-sourcemask-border-slicemask-border-widthmask-border-outsetmask-border-repeatmask-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

浏览器兼容性

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

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.