En este artículo, veremos cómo configurar el color de sombra de div usando CSS. Como los humanos tienen sus sombras, podemos usar CSS para hacer cualquier color de sombra para el elemento div.
Propiedad de sombra de cuadro : esta propiedad se utiliza para crear una o más de una sombra para un elemento.
Acercarse:
- Cree la página HTML con el elemento div.
- Con la ayuda de la propiedad box-shadow, aplique sombra al elemento div.
Ejemplo 1: en el siguiente ejemplo, hemos aplicado algo de sombra a nuestro elemento div con la ayuda de la propiedad box-shadow.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
font-size:25px;
}
#test {
border-style: outset;
padding: 10px;
box-shadow: 5px 10px green;
}
</style>
</head>
<body>
<h1 style= "color:green">
GeeksForGeeks
</h1>
<h2>box-shadow: 5px 10px green.</h2>
<div id="test">
<p>
Welcome to GeeksForGeeks, a computer
science for geeks.
</p>
</div>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
font-size:22px;
background-color:lightgreen;
}
#test {
border-style: outset;
padding: 10px;
box-shadow: 5px 10px 10px 20px green;
background-color:lightgreen;
}
</style>
</head>
<body>
<h1 style= "color:green">
GeeksForGeeks
</h1>
<h2>box-shadow:5px 10px 10px 20px green.</h2>
<div id="test">
<p>
Welcome to GeeksForGeeks,
a computer science for geeks.
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA