語法
/* <coord-box> values */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;
/* Keyword values */
mask-clip: no-clip;
/* Multiple values */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;
/* Global values */
mask-clip: inherit;
mask-clip: initial;
mask-clip: revert;
mask-clip: revert-layer;
mask-clip: unset;
值
該屬性接受逗號分隔的關鍵字值列表。每個值都是一個 <coord-box> 或 no-clip
content-box-
繪製內容被裁剪到內容框。
padding-box-
繪製內容被裁剪到內邊距框。
border-box-
繪製內容被裁剪到邊框框。
fill-box-
繪製內容被裁剪到物件邊界框。
stroke-box-
繪製內容被裁剪到描邊邊界框。
view-box-
使用最近的 SVG 視口作為參考框。如果為建立 SVG 視口的元素指定了
viewBox屬性，則參考框位於由viewBox屬性建立的座標系原點，並且參考框的尺寸設定為viewBox屬性的寬度和高度值。 no-clip-
繪製內容不被裁剪。
border-
此關鍵字的行為與
border-box相同。 padding-
此關鍵字的行為與
padding-box相同。 content-
此關鍵字的行為與
content-box相同。 文字-
此關鍵字將蒙版影像裁剪到元素的文字。
描述
mask-clip 屬性定義了元素中受應用蒙版影響的區域。
對於不引用 SVG <mask> 元素的蒙版層影像，mask-clip 屬性定義了蒙版繪製區域，或受蒙版影響的區域。元素的繪製內容將限制在此區域內。
mask-clip 屬性對引用 <mask> 元素的蒙版層影像沒有影響。當 mask-image 的源是 <mask> 時，<mask> 元素的 x、y、width、height 和 maskUnits 屬性決定了蒙版繪製區域。
一個元素可以應用多個蒙版層。層的數量由 mask-image 屬性值中逗號分隔值的數量決定（即使某個值為 none）。逗號分隔值列表中的每個 mask-clip 值按順序與 mask-image 值匹配。如果兩個屬性中的值數量不同，則 mask-clip 的任何多餘值將不被使用，或者，如果 mask-clip 的值少於 mask-image，則 mask-clip 的值會重複。
正式定義
正式語法
mask-clip =
[ <coord-box> | no-clip ]#
<coord-box> =
<paint-box> |
view-box
<paint-box> =
<visual-box> |
fill-box |
stroke-box
<visual-box> =
content-box |
padding-box |
border-box
示例
將蒙版裁剪到邊框框
此示例演示了三個 mask-clip 值。
HTML
我們包含三個元素，每個元素都有一個不同的 <coord-box> 值作為類名。
<div class="border-box"></div>
<div class="padding-box"></div>
<div class="content-box"></div>
CSS
CSS 定義了元素具有背景、邊框、內邊距和外邊距，以及蒙版影像，每個 <div> 都具有不同的 <coord-box>。我們生成了帶有類名稱的內容，將文字向上移動 10 畫素以防止其被蒙版遮擋。
div {
width: 100px;
height: 100px;
background-color: #8cffa0;
margin: 10px;
border: 20px solid #8ca0ff;
padding: 20px;
mask-image: url("https://mdn.github.io/shared-assets/images/examples/mdn.svg");
mask-size: 100% 100%;
}
.content-box {
mask-clip: content-box;
}
.border-box {
mask-clip: border-box;
}
.padding-box {
mask-clip: padding-box;
}
div::before {
content: attr(class);
position: relative;
top: -10px;
}
結果
規範
| 規範 |
|---|
| CSS 蒙版模組 Level 1 # the-mask-clip |
瀏覽器相容性
載入中…