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 julio de 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
Sintaxis Formal:background-clip =
<bg-clip>#
<bg-clip> =
<visual-box> |
[ border-area || text ]
<visual-box> =
content-box |
padding-box |
border-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
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-clip |
| CSS Backgrounds Module Level 4 # background-clip |