Distancia de desenfoque significa desenfocar el borde de un elemento y establecer su distancia usando CSS. En este artículo, veremos cómo configurar la distancia de desenfoque usando CSS para diseñar la distancia de desenfoque en el elemento HTML.
Puede usar la propiedad box-shadow que da un efecto de sombra a los marcos de un elemento.
Sintaxis:
box-shadow: h-offset v-offset blur color;
El valor de la propiedad:
- h-offset: valor de la sombra horizontal.
- v-offset: Valor de la sombra vertical.
- desenfoque: Para desenfocar la sombra.
Ejemplo 1: en este ejemplo, agregaremos un efecto de distancia de desenfoque en el elemento div.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: green;
}
div {
width: 500px;
height: 250px;
border: 3px solid #4CAF50;
background-color: #4CAF50;
position: center;
box-shadow: 10px 10px 10px black;
}
div:hover {
background-color: #3e8e41
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<div>Box-shadow blur</div>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, agregaremos la propiedad de distancia azul a dos elementos div diferentes.
HTML
<!DOCTYPE html>
<html>
<head>
<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:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA