mask-clip

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mask-clip
実験的
Chrome 完全対応 1
接頭辞付き
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 未対応 なしFirefox 完全対応 53
完全対応 53
未対応 20 — 53
無効
無効 From version 20 until version 53 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 4
接頭辞付き
完全対応 4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 2
接頭辞付き
完全対応 2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 18
接頭辞付き
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 53
完全対応 53
未対応 20 — 53
無効
無効 From version 20 until version 53 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 14
接頭辞付き
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 3.2
接頭辞付き
完全対応 3.2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
border
実験的非標準
Chrome 完全対応 1Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 15Safari 完全対応 4WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり
content
実験的非標準
Chrome 完全対応 1Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 15Safari 完全対応 4WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり
padding
実験的非標準
Chrome 完全対応 1Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 15Safari 完全対応 4WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり
text
実験的非標準
Chrome 完全対応 1Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 15Safari 完全対応 4WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。