Box-shadow fewer property

HTML-CSS
1

My browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36.

Challenge: Add a box-shadow to a Card-like Element

Link to the challenge:

The explanation provided for box-shadow is:

The box-shadow property takes values for

  • offset-x (how far to push the shadow horizontally from the element),
  • offset-y (how far to push the shadow vertically from the element),
  • blur-radius ,
  • spread-radius and
  • color , in that order.

The blur-radius and spread-radius values are optional.

and the example provided is:

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

Counting the number of properties shouldn’t there be two “0” after box-shadow: ?

I believe the following would be the right example:

box-shadow: 0 0 10px 20px rgba(0,0,0,0.19), 0 0  6px 6px rgba(0,0,0,0.23);

I am a bit confused.

2

In this example they set offset-y: 10px,6px and blur-radius: 20px,6px.
and in your example you set blur-radius: 10px,6px and spread-radius: 20px,6px
you didn’t mention offset-x and offset-y.
If we don’t include spread-radius in box-shadow than CSS interpret like this-
box-shadow: offset-x offset-y blur-radius color;
this is a shorthand way to set box-shadow if you didn’t mention spread radius.

3

I understand this now, in the example provided spread-radius is not specified as it’s optional.

Thanks.

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.