在设计图会经常使用到的阴影效果，如何用css3来实现呢？这篇文章主要整理box-shadow的一些悦目常用的投影效果。

1、曲面/椭圆投影效果:

代码如下：

<style>
.shadow_wrap{
  width: 100%;background:#E6EEF6;max-width: 600px;margin: auto;overflow: hidden;
}
.shadow1{
  background-color: #9ecf68;
}
.shadow2{
  background-color: #00bcd4;
}
.shadow1,.shadow2{
	position:relative;
	width:40%;
    height:200px;
    float:left;
    margin:5% 15px;
    border-radius:5px;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
.shadow_wrap h3{
  width:87%;
  height:100px;
  margin-left:6%;
  text-align:center;
  padding-top:60px;
  color:#fff;
}
/**styling shadows**/
.shadow1:before, .shadow1:after{
  position:absolute;
  content:"";
  bottom:12px;left:15px;top:80%;
  width:45%;
  background:#9B7468;
  z-index:-1;
  -webkit-box-shadow: 0 20px 15px #9B7468;
  -moz-box-shadow: 0 20px 15px #9B7468;
  box-shadow: 0 20px 15px #9B7468;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow1:after{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 15px;left: auto;
}
.shadow2:before, .shadow2:after{
  position:absolute;
  content:"";
  top:100px;bottom:5px;left:30px;right:30px;
  z-index:-1;
  box-shadow:0 0 40px 13px #486685;
  border-radius:100px/20px; 
}

</style>


<div class="f352-a3d1-628f-a941 shadow_wrap">
  <div class="a3d1-628f-a941-2f20 shadow1">
    <h3>椭圆投影1</h3>
  </div>
  <div class="628f-a941-2f20-014e shadow2">
    <h3>椭圆投影2</h3>
  </div>
</div

2、悬浮投影效果: