blob: 0b10fad9fba6e1842630abc04d86693e91f2c0a2 (
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
|
---
title: mask-clip
slug: Web/CSS/mask-clip
tags:
- CSS
- Experimental
- Propriété
- Reference
translation_of: Web/CSS/mask-clip
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>mask-clip</code></strong> définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* Valeurs de type <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;
/* Valeurs avec un mot-clé */
mask-clip: no-clip;
/* Valeurs multiples */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;
/* Mots-clés non-standards */
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;
/* Valeurs globales */
mask-clip: inherit;
mask-clip: initial;
mask-clip: unset;
</pre>
<h2 id="Syntaxe_2">Syntaxe</h2>
<p>Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.</p>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>content-box</code></dt>
<dd>La partie qui est « peinte » est rognée sur la boîte de contenu.</dd>
<dt><code>padding-box</code></dt>
<dd>La partie qui est « peinte » est rognée sur la boîte de <em>padding</em>.</dd>
<dt><code>border-box</code></dt>
<dd>La partie qui est « peinte » est rognée sur la boîte de bordure.</dd>
<dt><code>margin-box</code></dt>
<dd>La partie qui est « peinte » est rognée sur la boîte de marge.</dd>
<dt><code>fill-box</code></dt>
<dd>La partie qui est « peinte » est rognée sur la boîte contenant l'objet.</dd>
<dt><code>stroke-box</code></dt>
<dd>La partie qui est « peinte » est rognée sur la boîte contenant le contour.</dd>
<dt><code>view-box</code></dt>
<dd>C'est le <em>viewport</em> du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/viewBox">viewBox</a></code> est défini pour l'élément qui crée le <em>viewport</em>, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut <code>viewBox</code> et les dimensions de la boîtes sont basées sur la hauteur et la largeur de l'attribut <code>viewBox</code>.</dd>
<dt><code>no-clip</code></dt>
<dd>La partie qui est « peinte » n'est pas rognée.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</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;
-webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-clip: border;
mask-clip: border-box;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div id="masked"></div>
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples", "220px", "250px")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}}</td>
<td>{{Spec2("CSS Masks")}}</td>
<td>Définition initiale</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.mask-clip")}}</p>
|
