blob: 081b87c626f07c9b8df5301e725208f999b5080f (
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
|
---
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>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.mask-clip")}}</p>
|
