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 モジュール レベル 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 属性