La propiedad background-clip en CSS se usa para definir cómo extender el fondo (color o imagen) dentro de un elemento.
Valor por defecto:
- cuadro de borde
Sintaxis:
background-clip: border-box|padding-box|content-box|initial|inherit;
El valor de la propiedad:
border-box: la propiedad border-box se utiliza para establecer el color de fondo distribuido en toda la división.
- Sintaxis:
background-clip: border-box;
- Ejemplo:
html
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Border Box</
title
>
<
style
>
.gfg {
background-color: green;
background-clip:border-box;
text-align:center;
border:10px dashed black;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"gfg"
>
<
h2
>
GeeksforGeeks
</
h2
>
<
p
>
background-clip: border-box;
</
p
>
</
div
>
</
body
>
</
html
>
- Producción:
padding-box: la propiedad padding-box se usa para establecer el fondo dentro del borde.
- Sintaxis:
background-clip:padding-box;
- Ejemplo:
html
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>padding-box property</
title
>
<
style
>
.gfg {
background-color: green;
background-clip:padding-box;
padding: 25px;
border: 10px dashed black;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center"
>
<
div
class
=
"gfg"
>
<
h2
>
GeeksforGeeks
</
h2
>
<
p
>
background-clip: padding-box;
</
p
>
</
div
>
</
body
>
</
html
>
- Producción:
cuadro de contenido: la propiedad del cuadro de contenido se usa para establecer el color de fondo solo para el contenido.
- Sintaxis:
background-clip:content-box;
- Ejemplo:
html
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>content-box property</
title
>
<
style
>
.gfg {
background-color: green;
background-clip:content-box;
padding: 15px;
border: 10px dashed black;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center"
>
<
div
class
=
"gfg"
>
<
h2
>
GeeksforGeeks
</
h2
>
<
p
>
background-clip: content-box;
</
p
>
</
div
>
</
body
>
</
html
>
- Producción:
inicial: Es el valor por defecto. Se utiliza para establecer la distribución del color de fondo en toda la división.
background-clip:initial-box;
Ejemplo:
html
<!DOCTYPE html> <html> <head> <title>Initial</title> <style> .gfg { background-color: green; background-clip:initial; padding: 15px; border: 10px dashed black; } </style> </head> <body style = "text-align:center"> <div class = "gfg"> <h2> GeeksforGeeks </h2> <p> background-clip: initial; </p> </div> </body> </html>
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 4.0
- Ópera 10.5
- Safari 3.0
Navegador compatible: los navegadores compatibles con la propiedad background-clip se enumeran a continuación:
Publicación traducida automáticamente
Artículo escrito por Jitender_1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA