Traducción en curso
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 tendrá 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 inicial | border-box |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Heredable | no |
| Media | visual |
| Valor calculado | como se especifica |
| Animation type | discrete |
| Canonical order | el orden único no-ambigüo definido por la gramática formal |
Sintaxis
Sintaxis Formal: <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
| Especificación | Estado | Comentario |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 La definición de 'background-clip' en esta especificación. |
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.