initial commit

1 files changed, 94 insertions, 0 deletions

diff --git a/files/fr/web/css/-webkit-mask-box-image/index.html b/files/fr/web/css/-webkit-mask-box-image/index.html
new file mode 100644
index 0000000000..eccee98f66
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-box-image/index.html
@@ -0,0 +1,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>