CSS3下實現邊框陰影效果（下）-翹邊陰影效果

接着我們來實現翹邊陰影效果

.box{
    width: 980px;
    height: auto;
    overflow: hidden;
    margin: 20px auto;
}
.box li{
    width: 300px;
    height:210px ;
    float: left;
    margin: 20px 10px;
    border: solid 2px #efefef;
    background: #ffffff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
    -ms-box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
}
.box li img{
    display: block;
    width: 290px;
    height: 200px;
    margin: 5px;
}

• 通過定義上述樣式，我們可以看到圖片周圍生成了一個寬爲2px的透明邊框，並且向內生成了淡淡的陰影效果，接着和生成曲線陰影效果一樣，我們使用before和after這兩個僞元素選擇器生成陰影圖形並將其覆蓋在主圖形下面，因此我們需要在li樣式內添加position屬性的定義：

position:relative;

• 我們先來定義插入在主圖形前的圖像，爲了生成翹邊，我們需要生成一個平行四邊形或者

.box li:before{
    content: '';
    position: absolute;
    width: 90%;
    height: 80%;
    left: 20px;
    bottom: 8px;
    background: #f60;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -ms-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(-4deg);
    -o-transform: skew(-12deg) rotate(-4deg);
    -webkit-transform: skew(-12deg) rotate(-4deg);
    -moz-transform: skew(-12deg) rotate(-4deg);
    -ms-transform: skew(-12deg) rotate(-4deg);   
}

• 爲了方便觀察，我們可以將background設置爲#f60，在這裏width和height這兩個屬性決不能設置得等同於主圖像的寬高，因爲這樣生成的平行四邊形寬高有可能大於主圖形，所以我們將這兩個屬性設置得稍小一掉，使其保證內在住圖像之內；此外，爲了生成平行四邊形，我們使用到了transform：scale,這個屬性，使用的同時需要注意到瀏覽器內核兼容性問題，這裏不贅述
• 最後將新生成的圖像隱藏在住圖像之下，將background的屬性值改會transparent，設置z-index的屬性：

.box li:before{
    background:transparent;
    z-index:-1;
}

• 修改完後，我們便可以看到一邊的翹邊的陰影效果，我們可以在主圖像後插入另一個圖形，實現另一邊的翹邊效果：

.box li:after{
    content: '';
    position: absolute;
    width: 90%;
    height: 80%;
    right: 20px;
    bottom: 8px;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -ms-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    ttransform: skew(12deg) rotate(4deg);
    -o-transform: skew(12deg) rotate(4deg);
    -webkit-transform: skew(12deg) rotate(4deg);
    -moz-transform: skew(12deg) rotate(4deg);
    -ms-transform: skew(12deg) rotate(4deg);
    z-index: -2;
}

到這裏我們就製作完了曲線和翹邊的陰影效果，感謝各位小夥伴來觀！！