CSS3 两底角微卷起的投影效果

在工作中经常遇到各种销魂的卷角、阴影效果，一般我们都是直接切图，效果上当然能和设计图分毫不差，但是这种解决办法总让我心里莫名的不爽！所以，上一个 CSS3 的解决方案：

       先写 html 结构 :

<div class="box"></div>

      再看 CSS :

.box{display:inline-block;*display:inline;width:280px;height:360px;margin:20px;background-color:#fff;border:1px solid #eee;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.06) inset;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset;box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset;position:relative;*zoom:1;}

.box:before{-webkit-transform:skew(-15deg) rotate(-6deg);-moz-transform:skew(-15deg) rotate(-6deg);transform:skew(-15deg) rotate(-6deg);left:15px;}

.box:after{-webkit-transform:skew(15deg) rotate(6deg);-moz-transform:skew(15deg) rotate(6deg);transform:skew(15deg) rotate(6deg);right:15px;}

.box:before,.box:after{width:75%;height:50%;content:' ';-webkit-box-shadow:0 8px 16px rgba(0,0,0,0.3);-moz-box-shadow:0 8px 16px rgba(0,0,0,0.3);box-shadow:0 8px 16px rgba(0,0,0,0.3);position:absolute;bottom:10px;z-index:-1;}