blob: 10452c89766bdb1a6c1adfcd221c81780835c466 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
---
title: mask-clip
slug: Web/CSS/mask-clip
tags:
- CSS
- CSS マスク
- CSS プロパティ
- Experimental
- リファレンス
- recipe:css-property
browser-compat: css.properties.mask-clip
translation_of: Web/CSS/mask-clip
---
{{CSSRef}}
**`mask-clip`** は [CSS](/ja/docs/Web/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`](/ja/docs/Web/SVG/Attribute/viewBox) 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは `viewBox` 属性で示された座標系の原点に配置され、参照ボックスの寸法は `viewBox` 属性の幅と高さに設定されます。
- `no-clip`
- : 描画されるコンテンツは切り取られません。
- `border`{{non-standard_inline}}
- : このキーワードは `border-box` と同じ動作をします。
- `padding`{{non-standard_inline}}
- : このキーワードは `padding-box` と同じ動作をします。
- `content`{{non-standard_inline}}
- : このキーワードは `content-box` と同じ動作をします。
- `text`{{non-standard_inline}}
- : このキーワードは要素のテキストでマスク画像を切り取ります。
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
### 境界ボックスでマスクを切り取る
`mask-clip` の値を、上記の許容値のいずれかに変更してください。Chromium ベースのブラウザーでこの例を表示する場合は、`-webkit-mask-clip` の値を変更してください。
{{EmbedGHLiveSample("css-examples/masking/mask-clip.html", '100%', 800)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)
|
