blob: 023676b1a4ee7d9b2315bcfba66bde63bfed4840 (
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
|
---
title: mask-origin
slug: Web/CSS/mask-origin
tags:
- CSS
- CSS プロパティ
- CSS マスク
- Experimental
- リファレンス
- recipe:css-property
browser-compat: css.properties.mask-origin
translation_of: Web/CSS/mask-origin
---
{{CSSRef}}
**`mask-origin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、マスクの原点を設定します。
```css
/* キーワード値 */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;
/* 複数の値 */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;
/* 標準外のキーワード値 */
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;
/* グローバル値 */
mask-origin: inherit;
mask-origin: initial;
mask-origin: revert;
mask-origin: unset;
```
単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは {{cssxref("mask-image")}} プロパティで指定された画像の原点を指定します。複数のボックスとして描画される要素、例えば複数行にまたがるインラインボックスや複数のページにまたがるボックスなどでは、マスクの配置領域を決定するために {{cssxref("box-decoration-break")}} がどのボックスに作用するかを指定します。
## 構文
1 つまたは複数の以下に挙げたキーワード値を、カンマで区切って指定します。
### 値
- `content-box`
- : 位置がコンテンツボックスからの相対位置になります。
- `padding-box`
- : 位置がパディングボックスからの相対位置になります。単純なボックスでは `0 0` がパディング境界の左上隅で、 `100% 100%` は右下隅です。
- `border-box`
- : 位置が境界ボックスからの相対位置になります。
- `margin-box`
- : 位置がマージンボックスからの相対位置になります。
- `fill-box`
- : 位置がオブジェクトの囲みボックスからの相対位置になります。
- `stroke-box`
- : 位置が輪郭線ボックスからの相対位置になります。
- `view-box`
- : 直近の SVG ビューポートを参照ボックスとして使用します。 {{svgattr("viewBox")}} 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは `viewBox` 属性で示された座標系の原点に配置され、参照ボックスの寸法は `viewBox` 属性の幅と高さに設定されます。
- `content` {{non-standard_inline}}
- : `content-box` と同じです。
- `padding` {{non-standard_inline}}
- : `padding-box` と同じです。
- `border` {{non-standard_inline}}
- : `border-box` と同じです。
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
### マスクの原点を border-box に設定する
下のボックス内の CSS を更新して、他の可能な値を試してみてください。
{{EmbedGHLiveSample("css-examples/masking/mask-origin.html", '100%', 600)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)
|
