aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/-webkit-mask-box-image/index.md
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:58:15 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit149319bb8c7b1394a443f0877c3460cd362aa815 (patch)
treed534abb0cbc87d5e224836e9d6b888aa58564aa0 /files/fr/web/css/-webkit-mask-box-image/index.md
parenteb9de0363cb273b54d3f5402bbf4e3bc03c60971 (diff)
downloadtranslated-content-149319bb8c7b1394a443f0877c3460cd362aa815.tar.gz
translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.tar.bz2
translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.zip
move *.html to *.md
Diffstat (limited to 'files/fr/web/css/-webkit-mask-box-image/index.md')
-rw-r--r--files/fr/web/css/-webkit-mask-box-image/index.md92
1 files changed, 92 insertions, 0 deletions
diff --git a/files/fr/web/css/-webkit-mask-box-image/index.md b/files/fr/web/css/-webkit-mask-box-image/index.md
new file mode 100644
index 0000000000..79d751a5c2
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-box-image/index.md
@@ -0,0 +1,92 @@
+---
+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>
+
+<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>