不知道大家在做项目的时候遇见很绚丽的设计图后会怎么做。有一些设计图会经常使用阴影效果看上去更加立体，一般情况下像我这种懒人直接就切图了。压根就没有想着去研究一下代码怎么实现。
后来我们的设计稿总是改啊改啊，***简直是烦死我了，他要是改了图我就要正版的切图更换。所以我决定研究一下这个东西，其实我们是可以实现的哦！
如图所示：
上面的效果就是平时写项目最典型的效果了，做设计的小伙伴肯定知道PS分分钟搞定，但是代码实现起来我们也可以么？———告诉他们：必须可以！哈哈o(∩_∩)o；说了大话那就下点功夫研究一下吧！
第一部分：HTML
页面部分的内容很简单接下来让我们看看CSS的部分吧。
XML/HTML Code复制内容到剪贴板
<div class="con yy">
<h1>曲线阴影</h1>
</div>
<ul class="box">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
</ul>
第二部分：CSS3
在我们看到上面这个图片的时候大家肯定第一印象是CSS3的 box-shadow ,但是如果仅仅是这样子我们可以实现么？很明确不可以。
无论是曲面的也好还是翘边的也罢，box-shadow自己是无法实现的，我们需要配合CSS3的伪类元素来实现。
来一起看看代码吧！
曲面阴影我们就如下代码就可以实现了，不熟悉伪类元素的小伙伴可以自行查阅文档看看。
CSS Code复制内容到剪贴板
*{ padding: 0; margin: 0; list-style: none;}
.con{
width: 70%;
height: 200px;
margin: 50px auto;
background:#FFFFFF;
line-height: 200px;
text-align: center;
font-size: 24px;
}
.yy{
position: relative;
box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
