css3-(Box-shadow) property

"Box-shadow Properties":

is a CSS3 property that is used to create a shadow effect.
syntax: box-shadow:offset-x offset-y blur spresd color position;
Property Value Description:
offset-x offset-y refers to the horizontal offset of the element;
Blur: Represents the blur radius of the shadow;
Spread: Shadow size (distance from element to shadow), positive values extend shadows in each direction of an element by a specified number, and negative values cause the shadow to shrink more than its own element

size is also small.
Color: The colour value of the shadow;
Position: Optional, indicates the location of the shadow, the default value is the outer shadow, and the keyword inset refers to the inner shadow.

multiple Shadows: Each Shadow is separated by commas;
round Shadows: Through Border-radius and Box-shadow and with the finish.
elements created with Box-shadow are border-wrapped and do not interfere with the layout of the page.
Example:
outer Shadow

. Box {            margin:0 Auto;             width:200px;             height:200px;             background-color:yellow;             box-shadow:10px 10px 10px 0px #999;        }

Inner Shadow

. Box {            margin:0 Auto;             width:200px;             height:200px;             background-color:yellow;             box-shadow:20px 10px 10px 10px #999 inset;        }

Here I only give two simple examples, have a lot of effect, explore more.

css3-(Box-shadow) property