Freecodecamp: Clarify how to create multiple box shadows

[erictleung]

Describe your problem and how to reproduce it:
Two things:

• Make it easier to read the property values box-shadow can take
• Mention that multiple shadows are applied using commas

Currently, the list of possible values for box-shadow is messy, because it is within a paragraph and may be difficult to parse how many values a single shadow takes. Secondly, the example doesn't explain how there are multiple shadows. Turns out, this is done because there is a comma there.

Suggested Fix

• Mention that commas are used to create multiple box shadows
• Create a list of the values for box-shadow, something like this:

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
• a color value, in that order.

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

Add a Link to the page with the problem:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element

Tell us about your browser and operating system:

• Browser Name: Chrome
• Browser Version: Version 72.0.3626.117 (Official Build) (64-bit)
• Operating System: Chrome OS

Note: given the upcoming changes to freeCodeCamp's next release as of the writing of this issue, you may claim this issue to work on, but it being merged will probably happen after the next big release. If you have any doubts, please ask in the contributors Gitter chat.

[BA1RY]

Hi, I would like to work on this issue.

[BA1RY]

Is this list style fine? @erictleung

[erictleung]

@BA1RY looks good to me :+1:

[BA1RY]

@erictleung I have made a PR. Please have a look at it.