background-clip
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
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 |
| Valor calculado | como se especifica |
| Animation type | a repeatable list |
Sintaxis
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
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-clip |
| CSS Backgrounds Module Level 4 # background-clip |