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.

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

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報