CSS實現曲面陰影效果

知道大家在做項目的時候遇見很絢麗的設計圖后會怎么做。有一些設計圖會經常使用陰影效果看上去更加立體，一般情況下像我這種懶人直接就切圖了。壓根就沒有想著去研究一下代碼怎么實現。

后來我們的設計稿總是改啊改啊，***簡直是煩死我了，他要是改了圖我就要正版的切圖更換。所以我決定研究一下這個東西，其實我們是可以實現的哦！

如圖所示：

上面的效果就是平時寫項目最典型的效果了，做設計的小伙伴肯定知道PS分分鐘搞定，但是代碼實現起來我們也可以么？———告訴他們：必須可以！哈哈o(∩_∩)o；說了大話那就下點功夫研究一下吧！

第一部分：HTML

頁面部分的內容很簡單接下來讓我們看看CSS的部分吧。

<div class="con yy">
     <h2>曲線陰影</h2>
</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的偽類元素來實現。

來一起看看代碼吧！

曲面陰影我們就如下代碼就可以實現了，不熟悉偽類元素的小伙伴可以自行查閱文檔看看。

*{ 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;
    -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
}
.yy:after , .yy:before{
    position: absolute;
    content: '';
    top: 50%;
    bottom: -1px;
    left: 10px;
   right: 10px;
    background:#fff;
    z-index: -1;
    /* 圓角水平為100px 垂直為10px 必須用‘/’分開 ，不可以為空格 */
    border-radius: 100px/10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 0 20px rgba(0,0,0,0.3);
   -o-box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

下面的代碼就是怎么去實現翹邊陰影的效果：

.box{ 
    width: 980px;
    height: 300px;
    margin: 0 auto; 
}
.box li img{
    display: block;
    width: 290px;
    height: 200px;
}
.box li{
   position: relative;
    float: left;
    width: 290px;
    height: 200px;
    background: #FFFFFF;
    padding: 5px;
    margin-right: 25px;
    box-shadow: 0 0px 4px rgba(0,0,0,0.3) , 0 0 60px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.3) , 0 0 60px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow: 0 0px 4px rgba(0,0,0,0.3) , 0 0 60px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 0px 4px rgba(0,0,0,0.3) , 0 0 60px rgba(0,0,0,0.1) inset; 
}
.box li:before{
    position:absolute;
    content: '';
    width: 90%;
    height: 80%;
    left: 18px;
    bottom: 11px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    transform: skew(-12deg) rotate(-5deg);
    -moz-transform: skew(-12deg) rotate(-5deg);
    -webkit-transform: skew(-12deg) rotate(-5deg);
    -o-transform: skew(-12deg) rotate(-5deg); 
}
.box li:after{
    position:absolute;
    content: '';
    width: 90%;
    height: 80%;
    right: 18px;
    bottom: 11px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    transform: skew(12deg) rotate(5deg);
    -moz-transform: skew(12deg) rotate(5deg);
    -webkit-transform: skew(12deg) rotate(5deg);
    -o-transform: skew(12deg) rotate(5deg); 
}

這樣子的效果都是很巧妙的利用了CSS3的偽類元素來實現的，在視覺體驗上為產品可是大大的加分哦！有興趣的小伙伴也來試試吧。

需要demo的給我留言！不懂的可以加QQ找我哦！

==================

更多資源請點擊：http://www.aliyue.net

==================