CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。下面分别介绍盒子阴影的使用。
1、盒子阴影的属性是 box-shadow
CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果，该属性几乎可以让你完成你想要的任何阴影效果。
box-shadow:5px 5px 10px gray;
前两个值分别表示阴影水平方向和垂直方向的偏移量。
第三个值表示模糊距离。最后一个值是阴影颜色。
2、盒子阴影是可以随着盒子形状而自动变化的
3、如果盒子下面有内容的话，可以使用 rgba() 函数，将阴影颜色设置为半透明的
box-shadow:5px 5px 10px rgba(0,0,0,0.5);
4、伸展范围设置
在模糊距离后面还可以添加一个值，表示伸展范围（spread）。用来增大模糊边界之前的实心颜色面积。
下面昨天是未设置伸展范围，右图设置了：
box-shadow:5px 5px 10px 5px gray;
5、在颜色后面加上 inset 用来创建内部阴影
box-shadow:5px 5px 10px gray inset;
网上找了几张图，大家可以对应的看一下，更加好理解。
再说的具体一点：
CSS 代码:
div {
width: 150px;
height: 150px;
background-color: #fff;
box-shadow: 120px 80px 40px 20px #0ff;
/* 顺序为: offset-x, offset-y, blur-size, spread-size, color */
/* blur-size 和 spread-size 是可选的 (默认为 0) */
}来个图解：
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex {
display: flex;
flex-wrap: wrap;
}
.flex-item {
margin-right: 30px;
}
.box {
background-color: #CCCCCC;
border-radius: 10px;
width: 200px;
height: 200px;
}
.boxshadow1 {
box-shadow: inset 0px 0px 5px 1px #000;
}
.boxshadow2 {
box-shadow: inset 0 1px 2px 1px #000;
}
.boxshadow3 {
box-shadow: 0 0 10px #000;
}
.boxshadow4 {
box-shadow: 2px 2px 5px #000;
}
.boxshadow5 {
box-shadow: 0 0 5px 15px #000;
}
.boxshadow6 {
box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
}
</style>
</head>
<body>
<div class="flex">
<div class="flex-item">
<h3>内阴影示例</h3>
<div class="box boxshadow1"></div>
</div>
<div class="flex-item">
<h3>3边内影示例</h3>
<div class="box boxshadow2"></div>
</div>
<div class="flex-item">
<h3>外阴影示例</h3>
<div class="box boxshadow3"></div>
</div>
<div class="flex-item">
<h3>右下外阴影示例</h3>
<div class="box boxshadow4"></div>
</div>
<div class="flex-item">
<h3>扩大阴影示例</h3>
<div class="box boxshadow5"></div>
</div>
<div class="flex-item">
<h3>半透明阴影色示例</h3>
<div class="box boxshadow6"></div>
</div>
</div>
</body>
</html>效果图：
更多web前端相关知识，请查阅 HTML中文网 ！！
