background-clip

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	discrete

Sintaxis

Sintaxis Formal: background-clip = 
  <box>#  

<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

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

BCD tables only load in the browser