mask-clipCSS のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。

/* <geometry-box> 値 */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: margin-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

/* キーワード値 */
mask-clip: no-clip;

/* 標準外のキーワード値 */
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/* 複数の値 */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

/* グローバル値 */
mask-clip: inherit;
mask-clip: initial;
mask-clip: unset;

初期値border-box
適用対象すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序構文通り

構文

1つまたは複数の以下に挙げたキーワード値を、コンマで区切って指定します。

content-box
描画されるコンテンツは、コンテンツボックスでクリッピングされます。
padding-box
描画されるコンテンツは、パディングボックスでクリッピングされます。
border-box
描画されるコンテンツは、境界ボックスでクリッピングされます。
margin-box
描画されるコンテンツは、マージンボックスでクリッピングされます。
fill-box
描画されるコンテンツは、オブジェクトの囲みボックスでクリッピングされます。
stroke-box
描画されるコンテンツは、オブジェクトの輪郭線ボックスでクリッピングされます。
view-box
直近の SVG ビューポートを参照ボックスとして使用します。 viewBox 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは viewBox 属性で示された座標系の原点に配置され、参照ボックスの寸法は viewBox 属性の幅と高さに設定されます。
no-clip
描画されるコンテンツはクリッピングされません。
border
このキーワードは border-box と同じ動作をします。
padding
このキーワードは padding-box と同じ動作をします。
content
このキーワードは content-box と同じ動作をします。
text
このキーワードは要素のテキストでマスク画像をクリッピングします。

形式文法

[ <geometry-box> | no-clip ]#

where
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

where
<shape-box> = <box> | margin-box

where
<box> = border-box | padding-box | content-box

CSS

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  margin: 20px;
  border: 20px solid #8ca0ff;
  padding: 20px;
  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
  mask-size: 100% 100%;
  mask-clip: border-box; /* Can be changed in the live sample */
}

仕様書

仕様書 状態 備考
CSS Masking Module Level 1
mask-clip の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mask-clip
実験的
Chrome 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 未対応 なしFirefox 完全対応 53IE 未対応 なしOpera 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 未対応 なしFirefox Android 完全対応 53Opera Android ? Safari iOS ? Samsung Internet Android ?
border
実験的非標準
Chrome 完全対応 1Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 完全対応 4WebView Android 完全対応 2Chrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS 完全対応 3.2Samsung Internet Android ?
content
実験的非標準
Chrome 完全対応 1Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 完全対応 4WebView Android 完全対応 2Chrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS 完全対応 3.2Samsung Internet Android ?
padding
実験的非標準
Chrome 完全対応 1Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 完全対応 4WebView Android 完全対応 2Chrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS 完全対応 3.2Samsung Internet Android ?
text
実験的非標準
Chrome 完全対応 1Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 完全対応 4WebView Android 完全対応 2Chrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS 完全対応 3.2Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,