La propiedad box-shadow en CSS se usa para dar un efecto de sombra a los marcos de un elemento. Los efectos múltiples se pueden aplicar al marco del elemento que está separado por la coma. La sombra del cuadro se puede describir usando compensaciones X e Y relativas al elemento, desenfoque y radio de extensión, y color.
Sintaxis:
box-shadow: h-offset v-offset blur spread color |none|inset|initial| inherit;
Valor por defecto: Su valor por defecto es ninguno.
Valor de la propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
- h-offset: Se requiere para establecer la posición de la sombra horizontalmente. El valor positivo se usa para establecer la sombra en el lado derecho del cuadro y el valor negativo se usa para establecer la sombra en el lado izquierdo del cuadro.
- v-offset: Es necesario establecer la posición del valor de la sombra verticalmente. El valor positivo se usa para establecer la sombra debajo del cuadro y el valor negativo se usa para establecer la sombra sobre el cuadro.
- desenfoque: Es un atributo opcional, el trabajo de este atributo es desenfocar la sombra de la caja.
Sintaxis:
box-shadow: h-offset v-offset blur;
Ejemplo: Este ejemplo ilustra el uso de la propiedad box-shadow donde se aplican propiedades como h-offset, v-offset y blur junto con sus valores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS box-shadow Property</title>
<style>
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur */
box-shadow: 5px 10px 10px;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur */
box-shadow: 5px 10px 28px;
}
</style>
</head>
<body>
<div class="gfg1">
<h1>Welcome to GeeksforGeeks!</h1> </div>
<br><br>
<div class="gfg2"> A computer Science portal </div>
</body>
</html>
Producción:
spread: Se utiliza para establecer el tamaño de la sombra. El tamaño del diferencial depende del valor del diferencial.
Sintaxis:
box-shadow: h-offset v-offset blur spread;
Ejemplo: Este ejemplo ilustra el uso de la propiedad box-shadow donde se aplica la propiedad spread para establecer el tamaño de la sombra.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS box-shadow Property</title>
<style>
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset
v-offset blur spread */
box-shadow: 5px 10px 10px 10px;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset
v-offset blur spread */
box-shadow: 5px 10px 28px 20px;
}
</style>
</head>
<body>
<div class="gfg1">
<h1>Welcome to GeeksforGeeks!</h1> </div>
<br><br>
<div class="gfg2"> A computer Science portal </div>
</body>
</html>
Producción:
color: Es un atributo opcional y se utiliza para establecer el color de la sombra.
Sintaxis:
box-shadow: h-offset v-offset color;
Ejemplo: Este ejemplo ilustra el uso de la propiedad box-shadow donde se aplica un tono de color diferente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS box-shadow Property</title>
<style>
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur
spread color */
box-shadow: 5px 10px 10px 10px green;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur
spread color */
box-shadow: 5px 10px 28px 20px green;
}
</style>
</head>
<body>
<div class="gfg1">
<h1>Welcome to GeeksforGeeks!</h1> </div>
<br><br>
<div class="gfg2"> A computer Science portal </div>
</body>
</html>
Producción:
recuadro: por defecto, la sombra se genera fuera del cuadro. Pero usando el recuadro, podemos crear la sombra dentro de la caja.
Sintaxis:
box-shadow: h-offset v-offset color inset;
Ejemplo: Este ejemplo ilustra el uso de la propiedad box-shadow donde se aplica la propiedad inset para hacer la sombra dentro del cuadro.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS box-shadow Property</title>
<style>
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur
spread color inset */
box-shadow: 5px 10px 10px 10px green inset;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur
spread color inset */
box-shadow: 5px 10px 28px 20px green inset;
}
</style>
</head>
<body>
<div class="gfg1">
<h1>Welcome to GeeksforGeeks!</h1> </div>
<br><br>
<div class="gfg2"> A computer Science portal </div>
</body>
</html>
Producción:
initial : se utiliza para establecer la propiedad box-shadow en su valor predeterminado.
Sintaxis:
box-shadow: initial;
Ejemplo: Este ejemplo ilustra el uso de la propiedad box-shadow donde se aplica la propiedad inicial para establecer sus valores en el valor predeterminado.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS box-shadow Property</title>
<style>
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: initial */
box-shadow: initial;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: initial */
box-shadow: initial;
}
</style>
</head>
<body>
<div class="gfg1">
<h1>Welcome to GeeksforGeeks!</h1> </div>
<br><br>
<div class="gfg2"> A computer Science portal </div>
</body>
</html>
Producción:
heredar : esta propiedad se hereda de su padre.
ninguno: Es el valor predeterminado y no contiene ninguna propiedad de sombra.
Navegadores compatibles: los navegadores compatibles con la propiedad box-shadow se enumeran a continuación:
- Google Chrome 10.0 4.0 -webkit-
- Internet Explorer 9.0 y posterior (utilice border-collapse )
- Microsoft Edge 12.0
- Firefox 4.0 3.5 -moz-
- Safari 5.1 3.1 -webkit-
- Ópera 10.5
Publicación traducida automáticamente
Artículo escrito por harjindersinghs168 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA