边框的阴影：
参数说明：
box-shadow:1px 2px 3px 4px #ccc inset；
1px 从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度） 2px 从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度） 3px 阴影的模糊度，只允许为正值 4px 阴影扩展半径 #ccc 阴影颜色 inset 设置为内阴影（如果不写这个值，默认为外阴影）
说明
1. 对于上边，沿x轴方向的偏移量显然没有意义，设为0px；
2. 沿y轴正方向阴影进入div内部，不显示，因此写为负数；
3. 扩展半径不要写，或者写成0px，这样就不会影响其他的边；
4. 颜色自定；
5. 模糊程度按需要自定；
6. 下、左、右边阴影按规律类推。
css部分
box-shadow: 0px -10px 0px 0px #ff0000, /*上边阴影 红色*/
-10px 0px 0px 0px #3bee17, /*左边阴影 绿色*/
10px 0px 0px 0px #2279ee, /*右边阴影 蓝色*/
0px 10px 0px 0px #eede15; /*下边阴影 黄色*/
例子：
demo.css
#box{
200px;
height:200px;
margin:30px auto;
text-align: center;
color:seagreen;
font-size: 26px;
line-height: 200px;
background: yellowgreen;
border:2px solid darkslategray;
box-shadow: 0px -10px 0px 0px #ff0000,
-10px 0px 0px 0px #3bee17,
10px 0px 0px 0px #2279ee,
0px 10px 0px 0px #eede15;
}
html部分：
<div id="box">
边框阴影
</div>
效果：
多张纸张层叠效果：
样式：
.footer:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2),
0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
完整代码：
<div class="footer">
<h1 style="margin:210px 110px;">多重纸张层叠样式</h1>
</div>
<style>
.footer{
margin:100px 100px;
500px;
height:500px;
border:2px solid #f6f6f6;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2),
0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
</style>
ok，就到这里