mask-border
===========

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

该属性为以下属性的简写: `mask-border-source` (en-US), `mask-border-slice`, `mask-border-width`, `mask-border-outset` (en-US), `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` (en-US).

`<'mask-border-slice'>`

将源图像切割后的区域的尺寸，最多可指定四个值。参见 `mask-border-slice`.

`<'mask-border-width'>`

边框 mask 的宽度。最多可指定四个值。参见 `mask-border-width`.

`<'mask-border-outset'>`

边框 mask 距离元素外边界的距离。最多可指定四个值。参见 `mask-border-outset` (en-US).

`<'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'>                                  
  
```

示例
--

### Bitmap

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

![](/zh-CN/docs/Web/CSS/mask-border/mask-border-diamonds.png)

#### 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 |

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `mask-border-mode`: `alpha`
* `mask-border-outset` (en-US): `0`
* `mask-border-repeat`: `stretch`
* `mask-border-slice`: `0`
* `mask-border-source` (en-US): `none`
* `mask-border-width`: `auto`
 |
| 适用元素 | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| 是否是继承属性 | 否 |
| Percentages | as each of the properties of the shorthand:* `mask-border-slice`: refer to size of the mask border image
* `mask-border-width`: relative to width/height of the mask border image area
 |
| 计算值 | as each of the properties of the shorthand:* `mask-border-mode`: as specified
* `mask-border-outset` (en-US): as specified, but with relative lengths converted into absolute lengths
* `mask-border-repeat`: as specified
* `mask-border-slice`: as specified
* `mask-border-source` (en-US): as specified, but with `url` values made absolute
* `mask-border-width`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `mask-border-mode`: discrete
* `mask-border-outset` (en-US): discrete
* `mask-border-repeat`: discrete
* `mask-border-slice`: discrete
* `mask-border-source` (en-US): discrete
* `mask-border-width`: discrete
 |
| Creates stacking context | yes |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.