边框阴影box-shadow

边框的阴影：

参数说明：

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{
    width: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;
	width: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，就到这里