files/fr/web/css/-webkit-mask-box-image/index.html


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

---
title: '-webkit-mask-box-image'
slug: Web/CSS/-webkit-mask-box-image
tags:
  - CSS
  - Non-standard
  - Reference
  - Web
translation_of: Web/CSS/-webkit-mask-box-image
---
<div>{{CSSRef}}{{Non-standard_header}}</div>

<p>La propriété <strong><code>-webkit-mask-box-image</code></strong> permet de définir l'image de masque utilisée pour la boîte de bordure d'un élément.</p>

<ul>
 <li>Valeur initiale : <code>none</code></li>
 <li>Applicabilité : à tous les éléments</li>
 <li>Héritée : non</li>
 <li>Type de média : visuel</li>
 <li>Valeur calculée : comme la valeur définie</li>
</ul>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="eval">-webkit-mask-box-image: &lt;mask-box-image&gt; [&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt; &lt;x-repeat&gt; &lt;y-repeat&gt;]
</pre>

<p>Où :</p>

<dl>
 <dt><code>&lt;mask-box-image&gt;</code></dt>
 <dd><code>{{cssxref("&lt;uri&gt;")}} | &lt;gradient&gt; | none</code></dd>
 <dt><code>&lt;top&gt;</code> <code>&lt;right&gt;</code> <code>&lt;bottom&gt;</code> <code>&lt;left&gt;</code></dt>
 <dd><code>&lt;length&gt; | &lt;percentage&gt;</code></dd>
 <dt><code>&lt;x-repeat&gt;</code> <code>&lt;y-repeat&gt;</code></dt>
 <dd><code>repeat | stretch | round</code></dd>
</dl>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;uri&gt;</code></dt>
 <dd>L'emplacement de la ressource qui doit être utilisée comme image de masque.</dd>
 <dt><code>&lt;gradient&gt;</code></dt>
 <dd>Une fonction <code>-webkit-gradient</code> utilisée pour générer l'image de masque.</dd>
 <dt><code>none</code></dt>
 <dd>Ce mot-clé indique que la boîte de bordure n'a pas de masque.</dd>
</dl>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>Le décalage à appliquer à l'image de masque (cf. {{cssxref("&lt;length&gt;")}} pour les unités possibles).</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>Le décalage de l'image exprimé en pourcentages relatifs à la dimension de la boîte de bordure de l'élément (la largeur ou la hauteur selon l'axe).</dd>
 <dt><code>repeat</code></dt>
 <dd>L'image est répétée autant de fois que nécessaire pour remplir la boîte de bordure. On pourra avoir des morceaux d'image si les dimensions de celle-ci ne permettent pas d'en copier un nombre entier sur la boîte.</dd>
 <dt><code>stretch</code></dt>
 <dd>L'image de masque est étirée pour être contenue exactement dans la boîte de bordure.</dd>
 <dt><code>round</code></dt>
 <dd> L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure.</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<pre class="brush: css">.exempleUn {
  -webkit-mask-box-image: url('mask.png');
}

.exempleDeux {
  -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
}
</pre>

<h2 id="Spécifications">Spécifications</h2>

<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>

<p>{{Compat("css.properties.-webkit-mask-box-image")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("-webkit-mask")}}</li>
 <li>{{cssxref("-webkit-mask-origin")}}</li>
 <li>{{cssxref("-webkit-mask-attachment")}}</li>
 <li>{{cssxref("-webkit-mask-clip")}}</li>
 <li>{{cssxref("-webkit-mask-image")}}</li>
 <li>{{cssxref("-webkit-mask-composite")}}</li>
 <li>{{cssxref("-webkit-mask-repeat")}}</li>
</ul>