---
title: '-webkit-mask-box-image'
slug: Web/CSS/-webkit-mask-box-image
tags:
  - CSS
  - Diseño
  - Referencia
  - Web
translation_of: Web/CSS/-webkit-mask-box-image
---
<p>{{ CSSRef() }}</p>

<p>{{ Non-standard_header() }}</p>

<h2 id="Summary" name="Summary">Resumen</h2>

<p><code>-webkit-mask-box-image</code> establece la imagen de máscara para la caja del borde de un elemento.</p>

<ul>
 <li>{{ Xref_cssinitial() }}: none</li>
 <li>Se aplica a : Todos los elementos</li>
 <li>{{ Xref_cssinherited() }}: no</li>
 <li>Media: {{ Xref_cssvisual() }}</li>
 <li>{{ Xref_csscomputed() }}: tal y como se especfica</li>
</ul>

<h2 id="Syntax" name="Syntax">Síntaxis</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>Where:</p>

<dl>
 <dt>&lt;mask-box-image&gt;</dt>
 <dd><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">{{cssxref("&lt;uri&gt;")}} | &lt;gradient&gt; | none</code></dd>
 <dt>&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt;</dt>
 <dd><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">&lt;length&gt; | &lt;percentage&gt;</code></dd>
 <dt>&lt;x-repeat&gt; &lt;y-repeat&gt;</dt>
 <dd><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">repeat | stretch | round</code></dd>
</dl>

<h3 id="Values" name="Values">Valores</h3>

<dl>
 <dt>&lt;uri&gt;</dt>
 <dd>La localización del recurso imagen que será usada como imagen de máscara..</dd>
 <dt style="font-style: normal; font-weight: bold;">&lt;gradient&gt;</dt>
 <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">La función <span style="font-family: courier new;">-webkit-gradient</span> que se usará como imagen de máscara.</dd>
 <dt>none</dt>
 <dd>Para especificar que la caja del borde no va a tener imagen de máscara.</dd>
</dl>

<dl>
 <dt>&lt;length&gt;</dt>
 <dd>El tamaño del desplazamiento de la imagen de máscara. Ver  {{cssxref("&lt;length&gt;")}} para posibles unidades.</dd>
 <dt>&lt;percentage&gt;</dt>
 <dd>El desplazamiento de la imagen de máscara tiene un valor que se corresponde con un porcentaje de la dimensiones (altura y anchura) del tamaño de la caja del borde.</dd>
 <dt style="font-style: normal; font-weight: bold;">repeat</dt>
 <dd>La imagen de máscara se repite tanta veces como sean necesarios para cubrir la caja.  Puede incluir una imagen parcial si no existe una división exacta con el tamaño de la caja.</dd>
 <dt>stretch</dt>
 <dd>La imagen de máscara se encoge para contener la caja del borde exactamente.</dd>
 <dt>round</dt>
 <dd> Se encoge y repite de tal manera que no existan partes de la imagen de máscara al final de la caja.</dd>
</dl>

<h2 id="Examples" name="Examples">Ejemplos</h2>

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

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

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con los distintos navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>1.0</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>4.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>2.1</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>3.2</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Ver_además">Ver además</h2>

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