このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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-clip はCSS のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。
構文
/* <coord-box> 値 */mask-clip: content-box;mask-clip: padding-box;mask-clip: border-box;mask-clip: fill-box;mask-clip: stroke-box;mask-clip: view-box;/* キーワード値 */mask-clip: no-clip;/* 複数の値 */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: revert-layer;mask-clip: unset;値
このプロパティは、カンマで区切られたキーワード値のリストを受け入れます。各値は<coord-box> またはno-clip です。
content-box描画されるコンテンツは、コンテンツボックスで切り取られます。
padding-box描画されるコンテンツは、パディングボックスで切り取られます。
border-box描画されるコンテンツは、境界ボックスで切り取られます。
fill-box描画されるコンテンツは、オブジェクトの囲みボックスで切り取られます。
stroke-box描画されるコンテンツは、オブジェクトの輪郭線ボックスで切り取られます。
view-box直近の SVG ビューポートを参照ボックスとして使用します。
viewBox属性が SVG ビューポートを作成している要素に指定されると、参照ボックスはviewBox属性で示された座標系の原点に配置され、参照ボックスの寸法はviewBox属性の幅と高さに設定されます。no-clip描画されるコンテンツは切り取られません。
borderこのキーワードは
border-boxと同じ動作をします。paddingこのキーワードは
padding-boxと同じ動作をします。contentこのキーワードは
content-boxと同じ動作をします。textこのキーワードは要素のテキストでマスク画像を切り取ります。
解説
mask-clip プロパティは、適用されたマスクの影響を受ける要素の領域を定義します。
SVG の<mask> 要素を参照しないマスクレイヤー画像の場合、mask-clip プロパティは、マスクの描画領域、つまりマスクの影響を受ける領域を定義します。要素の描画コンテンツは、この領域に制限されます。
mask-clip プロパティは、<mask> 要素を参照するマスクレイヤーの画像には影響しません。<mask> 要素のx、y、width、height、maskUnits の各属性は、mask-image のソースが<mask> である場合のマスクの描画領域を決定します。
1 つの要素に複数のマスクレイヤーを適用することができます。レイヤーの数は、mask-image プロパティの値にカンマで区切られた値の数によって決まります（値がnone の場合も同様です）。カンマで区切られた値のリスト内の各mask-clip 値は、mask-image 値と順番に照合されます。 2 つのプロパティの値の数が異なる場合、mask-clip の余分な値は使用されません。また、mask-clip の値がmask-image の値よりも少ない場合、mask-clip の値は繰り返されます。
公式定義
| 初期値 | 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
例
境界ボックスでマスクを切り取る
この例では、3 つのmask-clip 値を示しています。
HTML
3 つの要素が含まれており、それぞれ異なる<coord-box> 値がクラス名として使用されています。
<div></div><div></div><div></div>CSS
CSS は、背景、境界、パディング、マージン、およびマスク画像を持つ要素を定義し、各<div> に異なる<coord-box> を指定します。クラスの名前でコンテンツを生成し、そのテキストがマスクされて表示されなくなるのを防ぐために 10px 上に移動しました。
div { width: 100px; height: 100px; background-color: #8cffa0; margin: 10px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.github.io/shared-assets/images/examples/mdn.svg); mask-size: 100% 100%;}.content-box { mask-clip: content-box;}.border-box { mask-clip: border-box;}.padding-box { mask-clip: padding-box;}div::before { content: attr(class); position: relative; top: -10px;}body { display: flex; flex-flow: row wrap;}結果
仕様書
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-clip |