Box-shadow Property

I. Definition and usage

The Box-shadow property adds one or more shadows to the box.

second, the grammar

Box-shadow:h-shadow v-shadow blur spread color inset;

H-shadow	Necessary. The position of the horizontal shadow. Negative values are allowed.
V-shadow	Necessary. The position of the vertical shadow. Negative values are allowed.
Blur	Optional. Blur distance.
Spread	Optional. The size of the shadow.
Color	Optional. The color of the shadow.
Inset	Optional. Changes the outer shadow (outset) to an inner shadow.

Iii. examples

1. box-shadow:2px 3px 4px #CCC;

/*<div style= "box-shadow:2px 3px 4px #CCC; width:300px;height:25px;margin:50px;border:2px solid #9CF;" > Blog Park </div>*/

An outer shadow element, the shadow position x-axis to the right offset 2px,y axis downward offset 3px, blur range 4px, shadow color #ccc

2. Box-shadow:inset 0-4px #CCC;

element with inner shadow, shadow X axis not offset, y upward offset 4px, color #ccc

3. Differences

1) Inner Shadow and outer shadow

Horizontal value positive: offset to the right. The outer shadow is shifted to the right, the shadow is right, the inner shadow is shifted to the right, and the shadow is left.

Negative value: Offset to the left. The outer shadow shifts left, the shadow is left, the inner shadow shifts to the left, and the shadow is on the right.

Vertical value positive: offset downward. The outer shadow is shifted downward, the shadow is down, the inner shadow is shifted downward, and the shadow is on.

Negative value: offset upward. The outer shadow is offset upward, the shadow is on top, the inner shadow is offset upward, and the shadow is down.

2) Shadow position size

3) Blur distance

"0" means that there is no blur effect is the most clear, the greater the more blurred, reached a certain value is a fog

4) Shadow Size

Box-shadow Property