-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