-webkit-mask-box-image

非标准：此功能是非标准的，并且不在标准轨道上。请勿在面向 Web 的生产站点上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

非标准的前缀-webkit-mask-box-image 简写属性设置元素边框框的蒙版图像。

注意：此属性不是标准的，并且不在任何标准轨道上。建议改用 mask-border 属性。

组成属性

此属性是以下 CSS 属性的简写

这些值包括用作蒙版边框的<image>，以及可选的四个边框偏移值和最多两个边框重复样式。

语法

css

/* default */
-webkit-mask-box-image: none;

/* image */
-webkit-mask-box-image: url(image.png);

/* image edge-offset */
-webkit-mask-box-image: url(image.png) 10 20 20 10;
-webkit-mask-box-image: url(image.png) 10px 20px 20px 10px;

/* image repeat-style */
-webkit-mask-box-image: url(image.png) space repeat;

/* image edge-offset repeat-style */
-webkit-mask-box-image: url(image.png) 10px 20px 20px 10px space repeat;

/* Global values */
-webkit-mask-box-image: inherit;
-webkit-mask-box-image: initial;
-webkit-mask-box-image: revert;
-webkit-mask-box-image: revert-layer;
-webkit-mask-box-image: unset;

值

<image>: 用作蒙版图像的图像资源位置、<gradient>或其他<image>值。
none: 用于指定边框框不应具有任何蒙版图像。
<length>: 蒙版图像偏移量的大小。有关可能的单位，请参见<length>。
<percentage>: 蒙版图像的偏移量相对于边框框的对应尺寸（宽度或高度）具有百分比值。
<number>: 蒙版图像偏移量的大小（以像素为单位）。
repeat: 蒙版图像会重复多次，以跨越边框框。如果蒙版图像不能均匀地划分为边框框，则可能包括部分图像。
stretch: 蒙版图像被拉伸以完全包含边框框。
round: 蒙版图像被稍微拉伸并重复，以便边框框末端没有部分蒙版图像。
space: 蒙版图像会尽可能重复，而不会拉伸。边框框末端没有部分蒙版图像。

偏移值或边缘偏移定义图像顶部、右侧、底部和左侧边缘的距离，顺序依次为。这些值可以设置为<length>、<number>或<percentage>，其中数字被解释为像素长度。

如果包含边框重复样式，则按<repeat-x> <repeat-y>的顺序解释。如果只声明一个值，则两个轴的值相同。虽然类似于background-repeat，但不支持cover和contain值。

正式定义

初始值：none
应用于：所有元素
继承：否
计算值：如指定

正式语法

-webkit-mask-box-image: <mask-image-source> [<mask-image-offset>{4} <mask-border-repeat>{1,2} ]

Where:

<mask-image-source> = <uri> | <gradient> | none

<mask-image-offset> = <length> | <percentage> | <number>

<repeat-style> = repeat | stretch | round | space

示例

设置图像

css

.exampleone {
  -webkit-mask-box-image: url("mask.png");
}

偏移和填充图像

css

.exampletwo {
  -webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
}