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;
}

到这里我们就制作完了曲线和翘边的阴影效果，感谢各位小伙伴来观！！