initial commit

1 files changed, 171 insertions, 0 deletions

diff --git a/files/es/web/css/background-clip/index.html b/files/es/web/css/background-clip/index.html
new file mode 100644
index 0000000000..2c8b8daf79
--- /dev/null
+++ b/files/es/web/css/background-clip/index.html
@@ -0,0 +1,171 @@
+---
+title: background-clip
+slug: Web/CSS/background-clip
+tags:
+  - CSS
+  - Diseño
+  - Fondo CSS
+  - Propiedad CSS
+  - Referencia
+  - Referência(2)
+  - Web
+translation_of: Web/CSS/background-clip
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p><span id="result_box" lang="es"><span class="hps">La propiedad</span></span> CSS <code>background-clip</code> <span id="result_box" lang="es"><span class="hps">especifica si</span> <span class="hps">el fondo</span> <span class="hps">de</span> <span class="hps">un elemento,</span> <span class="hps">ya sea</span> <span class="hps">el color</span> <span class="hps">o imagen</span><span>,</span> <span class="hps">se extiende por debajo</span> <span class="alt-edited hps">su borde</span><span>.</span></span></p>
+
+<p>Si la imagen o color de fondo no esta definido, esta propiedad solo tendrá un efecto visual cuando el borde tenga regiones transparentes o regiones parcialmente opacas (debido a {{ Cssxref("border-style") }} o {{ Cssxref("border-image") }}); <span class="short_text" id="result_box" lang="es"><span class="hps">de lo contrario</span> <span class="alt-edited hps">el borde</span> <span class="hps">cubre</span> <span class="hps">la diferencia</span></span>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Sintaxis Formal</a>: {{csssyntax("background-clip")}}</pre>
+
+<pre>background-clip: border-box
+background-clip: padding-box
+background-clip: content-box
+
+background-clip: inherit
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">fondo</span> <span class="hps">se extiende hasta el</span> <span class="hps">borde exterior de</span> <span class="alt-edited hps">el contenedor</span> <span class="atn hps">(</span><span>pero por debajo de</span> <span class="hps">la frontera, en</span> <span class="hps">orden z</span><span>)</span></span>.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>El fondo no se muestra a través del borde (<span id="result_box" lang="es"><span class="alt-edited hps">el fondo</span> <span class="hps">se extiende</span> <span class="hps">hasta el borde exterior</span> <span class="hps">del</span></span> padding).</dd>
+ <dt><code>content-box</code></dt>
+ <dd>El fondo se dibuja desde donde inicia el contenido.</dd>
+</dl>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;p class="border-box"&gt;The yellow background extends behind the border.&lt;/p&gt;
+&lt;p class="padding-box"&gt;The yellow background extends to the inside edge of the border.&lt;/p&gt;
+&lt;p class="content-box"&gt;The yellow background extends only to the edge of the content box.&lt;/p&gt;
+</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<pre class="brush: css">p {
+   border: 5px navy;
+   border-style: dotted double;
+   margin: 2em;
+   padding: 2em;
+   background: #F8D575;
+}
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+</pre>
+
+<h4 id="Salida">Salida</h4>
+
+<p>{{ EmbedLiveSample('Ejemplo', 540, 450) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador"><font><font>Compatibilidad del navegador</font></font></h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte basico</td>
+   <td>1.0 [3]</td>
+   <td>{{ CompatGeckoDesktop("2.0") }} [1]</td>
+   <td>9.0 [2]</td>
+   <td>10.5</td>
+   <td>3.0 (522) [3]</td>
+  </tr>
+  <tr>
+   <td><code>content-box</code></td>
+   <td>1.0 [3]</td>
+   <td>{{ CompatGeckoDesktop("2.0") }} [1]</td>
+   <td>9.0 [2]</td>
+   <td>12.0 (maybe earlier)</td>
+   <td>3.0 (522) [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.1</td>
+   <td>{{ CompatGeckoMobile("14") }}</td>
+   <td>7.1</td>
+   <td>12.1</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>content-box</code></td>
+   <td>4.1</td>
+   <td>{{ CompatGeckoMobile("14") }}</td>
+   <td>7.1</td>
+   <td>12.1</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko soportado, desde la version 1.1 a la version 1.9.2, <span class="short_text" id="result_box" lang="es"><span class="hps">que se corresponde con</span> <span class="hps">Firefox</span></span> 1.0 a 3.6 incluido, con una diferente sintaxis con prefijo: <code>-moz-background-clip: padding | border</code>.</p>
+
+<p>[2] Internet Explorer 7 soportado, <span id="result_box" lang="es"><span class="hps">pero</span> <span class="hps">en otras versiones de</span> <span class="hps">Internet Explorer</span> <span class="hps">se comporta como</span></span> <code>background-clip:padding</code> si <code>overflow es: hidden | auto | scroll</code>.</p>
+
+<p>[3]<span id="result_box" lang="es"><span class="hps">Webkit</span> <span class="hps">también es compatible con</span> <span class="hps">prefijo</span> en esta<span class="hps"> propiedad,</span> <span class="hps">y en ese caso</span><span>,</span> <span class="hps">además de las</span> <span class="hps">palabras clave</span> <span class="hps">actuales</span><span>,</span> <span class="hps">los</span> <span class="hps">sinónimos</span> <span class="hps">alternativas</span> <span class="hps">son</span></span>: <code>padding</code>, <code>border</code>, and <code>content</code>.</p>
+
+<p>[4] Konqueror 3.5.4 tiene soporte con<code> -khtml-background-clip</code>.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{ cssxref("clip") }}</li>
+ <li><a href="/en-US/docs/Web/CSS/box_model">Modelo de caja CSS</a></li>
+</ul>