-webkit-mask-box-image CSS 属性
非标准: 该特性尚未标准化。我们不建议在生产环境中使用非标准特性，因为它们在浏览器中的支持有限，且可能发生变化或被移除。不过，在没有标准选项的特定情况下，它们可以作为合适的替代方案。
-webkit-mask-box-image CSS 属性是一个非标准的带前缀简写，用于为元素的边框盒设置遮罩图像。
备注：此属性不属于标准，也未纳入任何标准轨道。请考虑改用 mask-border 属性。
构成属性
该属性是以下 CSS 属性的简写：
其取值包括用作遮罩边框的 <image>，以及可选的四个边框外扩值和最多两种边框重复样式。
语法
css
/* 默认值 */
-webkit-mask-box-image: none;
/* 图像 */
-webkit-mask-box-image: url("image.png");
/* 图像与边缘偏移 */
-webkit-mask-box-image: url("image.png") 10 20 20 10;
-webkit-mask-box-image: url("image.png") 10px 20px 20px 10px;
/* 图像与重复方式 */
-webkit-mask-box-image: url("image.png") space repeat;
/* 图像、边缘偏移与重复方式 */
-webkit-mask-box-image: url("image.png") 10px 20px 20px 10px space repeat;
/* 全局值 */
-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