mask-clip

Baseline 2023 *
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

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

css
/* <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: revert;
mask-clip: unset;

構文

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 非標準

このキーワードは要素のテキストでマスク画像を切り取ります。

公式定義

初期値border-box
適用対象すべての要素。 SVG の場合は <defs> 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

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 の値を、上記の許容値のいずれかに変更してください。Chromium ベースのブラウザーでこの例を表示する場合は、-webkit-mask-clip の値を変更してください。

仕様書

Specification
CSS Masking Module Level 1
# the-mask-clip

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-clip
border
Non-standard
content
Non-standard
padding
Non-standard
text
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報