CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必须。水平阴影的位置。允许负值。 |
| v-shadow | 必须。锤子阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。 |
| inset | 可选。将外部阴影（outset）修改为内部阴影 |
注意细节：
- 默认的是外阴影（outset）。但是不可以写这个单词，否则会导致阴影无效。
- 盒子阴影不占用空间，不会影响其他盒子排列。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
margin: 100px 100px;
border: 1px solid #CCCCCC;
/*设置盒子阴影*/
box-shadow: 0px 0px 20px red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>结果：
