blob: e057a4eeda942b8ad139a0e7ffb5885909c7cbf5 (
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
---
title: mask-clip
slug: Web/CSS/mask-clip
tags:
- CSS
- CSS Masking
- CSS Property
- CSS マスク
- Experimental
- Reference
translation_of: Web/CSS/mask-clip
---
<div>{{CSSRef}}</div>
<p><strong><code>mask-clip</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。</p>
<pre class="brush:css no-line-numbers">/* <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: unset;
</pre>
<p>{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<p>1つまたは複数の以下に挙げたキーワード値を、コンマで区切って指定します。</p>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>content-box</code></dt>
<dd>描画されるコンテンツは、コンテンツボックスでクリッピングされます。</dd>
<dt><code>padding-box</code></dt>
<dd>描画されるコンテンツは、パディングボックスでクリッピングされます。</dd>
<dt><code>border-box</code></dt>
<dd>描画されるコンテンツは、境界ボックスでクリッピングされます。</dd>
<dt><code>margin-box</code></dt>
<dd>描画されるコンテンツは、マージンボックスでクリッピングされます。</dd>
<dt><code>fill-box</code></dt>
<dd>描画されるコンテンツは、オブジェクトの囲みボックスでクリッピングされます。</dd>
<dt><code>stroke-box</code></dt>
<dd>描画されるコンテンツは、オブジェクトの輪郭線ボックスでクリッピングされます。</dd>
<dt><code>view-box</code></dt>
<dd>直近の SVG ビューポートを参照ボックスとして使用します。 <code><a href="/ja/docs/Web/SVG/Attribute/viewBox">viewBox</a></code> 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは <code>viewBox</code> 属性で示された座標系の原点に配置され、参照ボックスの寸法は <code>viewBox</code> 属性の幅と高さに設定されます。</dd>
<dt><code>no-clip</code></dt>
<dd>描画されるコンテンツはクリッピングされません。</dd>
<dt><code>border</code>{{non-standard_inline}}</dt>
<dd>このキーワードは <code>border-box</code> と同じ動作をします。</dd>
<dt><code>padding</code>{{non-standard_inline}}</dt>
<dd>このキーワードは <code>padding-box</code> と同じ動作をします。</dd>
<dt><code>content</code>{{non-standard_inline}}</dt>
<dd>このキーワードは <code>content-box</code> と同じ動作をします。</dd>
<dt><code>text</code>{{non-standard_inline}}</dt>
<dd>このキーワードは要素のテキストでマスク画像をクリッピングします。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Example" name="Example">例</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css highlight[10]">#masked {
width: 100px;
height: 100px;
background-color: #8cffa0;
margin: 20px;
border: 20px solid #8ca0ff;
padding: 20px;
mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
mask-size: 100% 100%;
mask-clip: border-box; /* Can be changed in the live sample */
}
</pre>
<div class="hidden">
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div id="masked">
</div>
<select id="clipBox">
<option value="content-box">content-box</option>
<option value="padding-box">padding-box</option>
<option value="border-box" selected>border-box</option>
<option value="margin-box">margin-box</option>
<option value="fill-box">fill-box</option>
<option value="stroke-box">stroke-box</option>
<option value="view-box">view-box</option>
<option value="no-clip">no-clip</option>
</select>
</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">var clipBox = document.getElementById("clipBox");
clipBox.addEventListener("change", function (evt) {
document.getElementById("masked").style.maskClip = evt.target.value;
});
</pre>
</div>
<p>{{EmbedLiveSample("Example", "220px", "250px")}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}}</td>
<td>{{Spec2("CSS Masks")}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<p>{{Compat("css.properties.mask-clip")}}</p>
|
