Shadow box-shadow, box-shadow

Shadow box-shadow, box-shadow
Syntax:

Box-shadow: None | <shadow> [, <shadow>] *

<Shadow>= Inset? & <Length> {2, 4} & <color>?

Default Value: None

Applicable: All elements

Inheritance: None

Animation: Yes, except for internal and external shadow Switching

Calculated value: Specified value

Valid value:

None: no shadow

<Length> ①: 1st length values are used to set the object shadow. Horizontal offset value. It can be a negative value.

<Length> ②: 2nd length values are used to set the object shadow. Vertical Offset Value. It can be a negative value.

<Length> ③: If 3rd length values are provided Shadow blur Value. Negative value not allowed

<Length> ④: If 4th length values are provided, it is used to set the shadow extension value of the object. It can be a negative value.

<Color>: Set the color of the Object Shadow.

Inset: Set the object shadow type to inner shadow. If this value is null, the object's shadow type is external shadow.

Note:

Sets or retrieves object shadows.See <'text-shadow'> Properties

• You can set multiple sets of effects. Each set of parameter values is separated by commas.
• Corresponding script features:BoxShadow.

 

 

 

<! DOCTYPE html> 

 
The shadow size is the shadow border added to the original DIV of 200px * 300px after the horizontal offset..
 
 
Believe it? Set the horizontal offset to 0 PX.
.sample{    width: 200px;    height: 300px;    background-color: #f1f1f1;    box-shadow: 0px 0px 0px 50px blue;    margin: 200px;}