background-clip

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Resumen

La propiedad CSS background-clip especifica si el fondo de un elemento, ya sea el color o imagen, se extiende por debajo su borde.

Si la imagen o color de fondo no esta definido, esta propiedad solo tendras un efecto visual cuando el borde tenga regiones transparentes o regiones parcialmente opacas (debido a border-style o border-image); de lo contrario el borde cubre la diferencia.

Valor inicialborder-box
Applies toall elements. It also applies to ::first-letter and ::first-line.
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animatableno
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Sintaxis Formal: <box>#

where
<box> = border-box | padding-box | content-box

background-clip: border-box
background-clip: padding-box
background-clip: content-box

background-clip: inherit

Valores

border-box
El fondo se extiende hasta el borde exterior de el contenedor (pero por debajo de la frontera, en orden z).
padding-box
El fondo no se muestra a través del borde (el fondo se extiende hasta el borde exterior del padding).
content-box
El fondo se dibuja desde donde inicia el contenido.

Ejemplo

Contenido HTML

<p class="border-box">The yellow background extends behind the border.</p>
<p class="padding-box">The yellow background extends to the inside edge of the border.</p>
<p class="content-box">The yellow background extends only to the edge of the content box.</p>

Contenido 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; }

Salida

Especificaciones

Especificacion Estado Comentario
CSS Backgrounds and Borders Module Level 3
The definition of 'background-clip' in that specification.
Candidate Recommendation  

Compatibilidad del navegador

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte basico 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 12.0 (maybe earlier) 3.0 (522) [3]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.1 14.0 (14) 7.1 12.1 (Yes)
content-box 4.1 14.0 (14) 7.1 12.1 (Yes)

[1] Gecko soportado, desde la version 1.1 a la version 1.9.2, que se corresponde con Firefox 1.0 a 3.6 incluido, con una diferente sintaxis con prefijo: -moz-background-clip: padding | border.

[2] Internet Explorer 7 soportado, pero en otras versiones de Internet Explorer se comporta como background-clip:padding si overflow es: hidden | auto | scroll.

[3]Webkit también es compatible con prefijo en esta propiedad, y en ese caso, además de las palabras clave actuales, los sinónimos alternativas son: padding, border, and content.

[4] Konqueror 3.5.4 tiene soporte con -khtml-background-clip.

Ver tambien

Etiquetas y colaboradores del documento

 Colaboradores en esta página: teoli, Sebastianz, rurigk
 Última actualización por: teoli,