diff options
author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:58:15 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
commit | 149319bb8c7b1394a443f0877c3460cd362aa815 (patch) | |
tree | d534abb0cbc87d5e224836e9d6b888aa58564aa0 /files/fr/web/css/-webkit-mask-box-image/index.md | |
parent | eb9de0363cb273b54d3f5402bbf4e3bc03c60971 (diff) | |
download | translated-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.md | 92 |
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: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] +</pre> + +<p>Où :</p> + +<dl> + <dt><code><mask-box-image></code></dt> + <dd><code>{{cssxref("<uri>")}} | <gradient> | none</code></dd> + <dt><code><top></code> <code><right></code> <code><bottom></code> <code><left></code></dt> + <dd><code><length> | <percentage></code></dd> + <dt><code><x-repeat></code> <code><y-repeat></code></dt> + <dd><code>repeat | stretch | round</code></dd> +</dl> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code><uri></code></dt> + <dd>L'emplacement de la ressource qui doit être utilisée comme image de masque.</dd> + <dt><code><gradient></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><length></code></dt> + <dd>Le décalage à appliquer à l'image de masque (cf. {{cssxref("<length>")}} pour les unités possibles).</dd> + <dt><code><percentage></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> |