Pequeña duda con el desafío de box-shadow

Hola!

Estoy teniendo dudas respecto a cómo funciona exactamente la propiedad box-shadow en CSS. Investigando un poco más por mi cuenta, me encontré con el siguiente generador de sombras en el sitio de Mozilla. Por lo que estuve probando diferentes valores para entender mejor su funcionamiento. El caso es que no llego a comprender del todo porqué se deberían utilizar más de un valor para box-shadow como se menciona en el desafío.

Desde ya les agradezco por cualquier tipo de ayuda. :slight_smile:

Hola como estás? Si te referís a porque puede haber 5 valores en la propiedad, primero te recomendaría que hagas la prueba por vos mismo para tratar de entenderlo por tu cuenta y para que te quede mas claro, los valores 3ro y 4to son los que marcan el ancho y alto de la sombra, y los valores 1ro y 2do son los que marcan la posición de la sombra. Y el 5to es el color. Es decir:

box-shadow: 2px 4px 10px 20px black ;

Estamos diciendo que la sombra:

  • Se va a mover 2px a la derecha
  • Se va mover 4px hacia abajo
  • Va a tener un width de 10px
  • Va a tener un height de 20px
  • Y va a ser color negra

Yo generalmente sólo modifico el valor width, porque creo que es escalado, es decir que si pones solamente un width de 20px la sombra se va a aplicar alrededor de todo el elemento, algo así:

box-shadow: 0px 0px 20px 0px black ;

NOTA: cada tanto me fijo a para ver si está bien lo que escribí y lo edito

1 Like