CSS Box shadow, margin, outline

box-shadow

The following values are allowed:

  • none - No shadow
  • h-offset - Horizontal offset (required)
  • v-offset - Vertical offset (required)
  • blur - Defines blur radius (optional)
  • spread - Defines spread radius (optional)
  • color - Defines color of the shadow
  • inset - Chnges outer shadow to inner shadow
  • initial - Default value
  • inherit - inherits from parent
Example:-

box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:

margin

The margin property sets the margins for an element, and is a shorthand property for the following properties:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
Example:-

A paragraph with no specified margins.

This paragraph has a 35 pixels margin for top, a 70 pixels margin for right, a 50 pixels margin for bottom, and a 90 pixels margin for left.

A paragraph with no specified margins.

outline

An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".

The outline property is a shorthand property for:

  • outline-width
  • outline-style(required)
  • outline-color
Example:-
A div element with a 2 pixels blue dashed outline. Also notice that the outline is outside of any border.