En CSS, la propiedad box-shadow agrega efectos de sombra alrededor del marco de un elemento. Podemos establecer múltiples efectos alrededor de un elemento separados por comas. Una sombra de cuadro se define como valores de desplazamiento relativos X e Y al elemento, desenfoque y radio de dispersión, y color.
En este artículo, aprenderemos cómo configurar la sombra insertada usando CSS. La propiedad de inserción cambia la sombra exterior a la sombra interior.
Nota: De forma predeterminada, la sombra se genera fuera del cuadro, pero mediante el uso de inserción podemos crear la sombra dentro del cuadro.
Sintaxis:
box-shadow: h-offset v-offset blur spread color | recuadro;
Enfoque: para dar la sombra insertada a un elemento, usaremos la propiedad box-shadow . En la propiedad box-shadow , definiremos el valor de h-offset (Obligatorio para el efecto de sombra horizontal), luego el valor de v-offset (Obligatorio para el efecto de sombra vertical).
También podemos dar un efecto de desenfoque y esparcir la sombra usando valores de desenfoque y esparcimiento. Al final, usaremos la palabra clave de inserción que cambiará la sombra dentro del marco.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#GFG {
/* For providing border to the element */
border: 1px solid;
/* For Padding */
padding: 10px;
/* Defining box-shadow property inset */
box-shadow: 5px 10px green inset;
}
h2 {
color: green;
}
</style>
</head>
<body>
<h2>Box-shadow: 5px 10px inset:</h2>
<div id="GFG">
<p>Welcome to GeeksforGeeks</p>
</div>
</body>
</html>
Producción:
Explicación: En el ejemplo anterior, habíamos establecido el valor de compensación h en 5 px, el valor de compensación v en 10 px y el color en verde.
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#GFG {
/* For providing border to the element */
border: 1px solid;
/* For Padding */
padding: 10px;
/* Defining box-shadow property as inset */
box-shadow: 5px 10px 20px 5px Green inset;
}
h2 {
color: green;
}
</style>
</head>
<body>
<h2>box-shadow: 5px 10px 20px 5px Green inset:</h2>
<div id="GFG">
<p>Inset, Green, Spread and Blur.</p>
</div>
</body>
</html>
Producción:
Explicación: En el ejemplo anterior, habíamos establecido el valor de desplazamiento h en 5 px, el valor de desplazamiento v en 10 px, el valor de desenfoque en 20 px, el valor de dispersión en 5 px y el color en verde.
Compatibilidad con navegador
|
Navegador |
Versión |
|---|---|
|
Cromo |
10.0 4.0 -webkit- |
|
explorador de Internet |
9.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 portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA