Sombras con transparencias (box-shadow)
Otra posibilidad que podemos aplicar a la propiedad box-shadow es definir un valor de transparencia de la sombra. Para esto debemos utilizar la función rgba, ejemplo:
box-shadow: 30px 30px 30px rgba(255,0,0,0.3);
Mediante la función rgba indicamos el color de la sombra con los primeros tres parámetros (en este ejemplo 255 de rojo, 0 de verde y 0 de azul), luego el cuarto parámetro es el índice de transparencia (donde 0 indica que es totalmente transparente la sombra y 1 es totalmente opaca, podemos utilizar cualquier valor entre 1 y 0)
Para confeccionar un recuadro con sombra de color rojo con un índice de transparencia del 50% luego debemos especificarlo de la siguiente manera:
#recuadro1{
box-shadow: 30px 30px 30px rgba(255,0,0,0.5);
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
