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
.
形式语法
示例
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 |
初始值 | 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 |
是否是继承属性 | 否 |
Percentages | as each of the properties of the shorthand:
|
计算值 | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Creates stacking context | yes |
浏览器兼容性
BCD tables only load in the browser