-webkit-mask-box-image
非标准：此特性未标准化。我们不建议在生产环境中使用非标准特性，因为它们浏览器支持有限，并且可能会更改或被移除。但是，在没有标准选项的特定情况下，它们可以是合适的替代方案。
非标准的前缀属性 -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 值。
正式定义
正式语法
-webkit-mask-box-image =
<mask-image-source> [ <mask-image-offset>{4} <mask-border-repeat>{1,2} ]
示例
设置图像
css
.example-one {
-webkit-mask-box-image: url("mask.png");
}
偏移并填充图像
css
.example-two {
-webkit-mask-box-image: url("logo.png") 100px 100px 0px 0px round round;
}
规范
不属于任何标准。
浏览器兼容性
加载中…
另见
- CSS
mask-border属性 - CSS
border-image属性 - Safari CSS 参考：
-webkit-mask-box-image