CSS mask-clip 屬性

定義和用法

mask-clip 屬性用于指定遮罩圖像影響的區域。

實例

展示 mask-clip 屬性的不同值：

.masked {
  width: 150px;
  height: 150px;
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 100% 100%;
}
.mask1 {
  mask-clip: border-box;
}
.mask2 {
  mask-clip: content-box;
}
.mask3 {
  mask-clip: padding-box;
}
.mask4 {
  mask-clip: fill-box;
}
.mask5 {
  mask-clip: stroke-box;
}

親自試一試

CSS 語法

mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;

屬性值

值 描述
border-box 繪制的內容被裁剪到邊框盒（border box）。默認值。
content-box 繪制的內容被裁剪到內容盒（content box）。
padding-box 繪制的內容被裁剪到內邊距盒（padding box）。
fill-box 繪制的內容被裁剪到對象邊界盒（object bounding box）。
stroke-box 繪制的內容被裁剪到描邊邊界盒（stroke bounding box）。
view-box 使用最近的 SVG 視口作為參考盒。
no-clip 不進行裁剪。
border 與 border-box 相同。
padding 與 padding-box 相同。
content 與 content-box 相同。
text 將遮罩裁剪到元素的文本。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： border-box
繼承性： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS Masking Module Level 1
JavaScript 語法： object.style.maskClip="padding-box"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

相關頁面

教程：CSS 遮罩

參考：CSS mask 屬性

參考：CSS mask-composite 屬性

參考：CSS mask-image 屬性

參考：CSS mask-mode 屬性

參考：CSS mask-origin 屬性

參考：CSS mask-position 屬性

參考：CSS mask-repeat 屬性

參考：CSS mask-size 屬性

參考：CSS mask-type 屬性