box-shadow在定义里是这么说的："box-shadow 属性向框添加一个或多个阴影。"
是的，和他的名字一样，这个属性固然是用来制造阴影效果让页面更有立体感的。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
其中属性分别为：
h-shadow：必需。水平阴影的位置。允许负值。
v-shadow：必需。垂直阴影的位置。允许负值。
blur：可选。模糊距离。
spread：可选。阴影的尺寸。
color：可选。阴影的颜色。请参阅 CSS 颜色值。
inset：可选。将外部阴影 (outset) 改为内部阴影。
浏览器支持：
IE9 、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
我从慕课网上看到Amy老师讲的 css3"图片阴影"效果 一课里学到不少，其中就提到了曲线阴影和翘边阴影。
课程链接：http://www.imooc.com/learn/240
原理：
给元素本身设置阴影，再利用befor以及after伪类创建元素，给伪类也设置同样的阴影，让三个阴影重叠就实现了炫酷的阴影效果。(●'◡'●)
代码：
html:
<div class="wrap effect">
<h1>shadow effect</h1>
</div>
css:
.wrap{
width: 70%;
height: 200px;
margin: 50px auto;
background: #fff;
}
.wrap h1{
font-size: 20px;
text-align: center;
line-height: 200px;
}
.effect{
position: relative;
box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
-webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
-moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
-o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
}
.effect:after,.effect:before{
content: '';
position: absolute;
background: #fff;
top: 50%;
bottom: 0px;
left: 10px;
right: 10px;
box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
-o-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
border-radius:100px/10px ;
z-index: -1;
}
原理：
与曲线阴影类似，利用两个伪类创造阴影效果，利用transform改变伪类形状成为平行四边形，分别一左一右的方向。
代码：
html：
<ul class="box">
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
</ul>
css：
.box li{
width: 240px;
height: 240px;
list-style: none;
float: left;
margin: 20px 10px;
border: 2px solid #efefef;
box-shadow: 0 1px 4px rgba(0,0,0,0.27);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27);
-o-box-shadow: 0 1px 4px rgba(0,0,0,0.27);
position: relative;
background: #fff;
}
.box li>img{
display: block;
margin: 11px;
}
.box li:before{
content: '';
position: absolute;
width: 90%;
left: 20px;
bottom: 10px;
background: transparent;
box-shadow: 0 8px 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
z-index: -1;
transform: skew(-10deg) rotate(-7deg);
-webkit-transform: skew(-10deg) rotate(-7deg);
-o-transform: skew(-10deg) rotate(-7deg);
-moz-transform: skew(-10deg) rotate(-7deg);
-ms-transform: skew(-10deg) rotate(-7deg);
}
.box li:after{
content: '';
position: absolute;
width: 90%;
height: 80%;
left: 20px;
bottom: 10px;
background: transparent;
box-shadow: 0 8px 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
z-index: -1;
transform: skew(10deg) rotate(7deg);
-webkit-transform: skew(10deg) rotate(7deg);
-o-transform: skew(-10deg) rotate(7deg);
-moz-transform: skew(10deg) rotate(7deg);
-ms-transform: skew(10deg) rotate(7deg);
}
大家可以把代码复制粘贴，自己查看一下元素研究一下具体详情，还有不懂的可以直接打开上面提到的课程自行学习。
福利：
喜欢偷懒的直接拿去复制粘贴吧，我经常用到的阴影代码
box-shadow:3px 2px 7px #DCDCDC, 2px 2px 5px #DCDCDC;
-webkit-box-shadow:3px 2px 7px #DCDCDC, 2px 2px 5px #DCDCDC;
-moz-box-shadow:3px 2px 7px #DCDCDC, 2px 2px 5px #DCDCDC;
)
