CSS3 box-shadow property description:

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: The distance of horizontal offset of shadow, greater than 0 means right offset, less than 0 means left offset, equal to zero equals no horizontal offset. This parameter is necessary.
v-shadow: The distance of shadow vertical migration, greater than 0 means downward migration, less than 0 means upward migration, equal to 0 means no vertical migration. This parameter is necessary.
blur: The fuzzy distance of the shadow, which is an optional parameter.
spread: Shadow size, which is an optional parameter. 0px means that the shadow is as big as the current entity, and greater than 0 means larger than the size of the entity.
Color: The color of the shadow, which is an optional parameter. The parameters are black, 000000 (hexadecimal), RGB:(0,0,0) (decimal) and so on.
inset: Change the external shadow to the internal shadow. This parameter is optional.

It is also stated that:

box-shadow:inset x-offset y-offset blur-radius spread-radius color
Object selector box-shadow: projection mode X-axis offset Y-axis offset shadow blurred radius shadow extended radius shadow color

Whatever the expression, how to use it is the focus of our attention. Don't be amused here. Let's do the following detailed examples.

Example 1: Horizontal to right offset of 5 pixels

.box_shadow{
	width:300px;
	height:120px;
	background:#AAA;
	box-shadow:5px 0px 0px #333;
	text-align:center;
	font:900 55px/120px "Microsoft YaHei", Helvetica, sans-serif;
	color:#FFF;
}

Effect picture:

Example 2: Horizontal to left offset of 5 pixels

.box_shadow{
	width:300px;
	height:120px;
	background:#AAA;
	box-shadow:-5px 0px 0px #333;
	text-align:center;
	font:900 55px/120px "Microsoft YaHei", Helvetica, sans-serif;
	color:#FFF;
}

Effect picture:

Example 3: Vertical downward offset of 5 pixels

.box_shadow{
	width:300px;
	height:120px;
	background:#AAA;
	box-shadow:0px 5px 0px #333;
	text-align:center;
	font:900 55px/120px "Microsoft YaHei", Helvetica, sans-serif;
	color:#FFF;
}

Effect picture:

Example 4: Vertical upward offset of 5 pixels

.box_shadow{
	width:300px;
	height:120px;
	background:#AAA;
	box-shadow:0px -5px 0px #333;
	text-align:center;
	font:900 55px/120px "Microsoft YaHei", Helvetica, sans-serif;
	color:#FFF;
}

Effect picture:

Example 5: Shift 5 pixels to the lower right and set the shadow blur radius to 5 pixels

.box_shadow{
	width:300px;
	height:120px;
	background:#AAA;
	box-shadow:5px 5px 5px #333;
	text-align:center;
	font:900 55px/120px "Microsoft YaHei", Helvetica, sans-serif;
	color:#FFF;
}

Effect picture:

Example 6: Shift 5 pixels to the lower right, set the shadow blur radius to 5 pixels, and set the shadow size to 10 pixels.

.box_shadow{
	width:300px;
	height:120px;
	background:#AAA;
	box-shadow:5px 5px 5px 10px #333;
	text-align:center;
	font:900 55px/120px "Microsoft YaHei", Helvetica, sans-serif;
	color:#FFF;
}

Effect picture:

Example 7: Shift 5 pixels to the lower right, set the shadow blur radius to 5 pixels, set the size of the shadow to 10 pixels, and set the color of the shadow to red.

.box_shadow{
	width:300px;
	height:120px;
	background:#AAA;
	box-shadow:5px 5px 5px 10px #F00;
	text-align:center;
	font:900 55px/120px "Microsoft YaHei", Helvetica, sans-serif;
	color:#FFF;
}

Effect picture:

Example 8: Setting internal shadows

.box_shadow{
	width:300px;
	height:120px;
	background:#AAA;
	box-shadow:0px 0px 5px 5px #999 inset;
	text-align:center;
	font:900 55px/120px "Microsoft YaHei", Helvetica, sans-serif;
	color:#FFF;
}

Effect picture:

For different browsers, solutions to compatibility problems are as follows:

.box_shadow{ 
	background-color: #eee; 
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/ 
	-moz-box-shadow:2px 2px 5px #969696;/*firefox*/ 
	-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ 
	box-shadow:2px 2px 5px #969696;/*opera Or ie9*/
}