CSS实现曲面阴影效果的简单实例(推荐)

    -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;   
    bottombottom: 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%;   
    rightright: 18px;   
    bottombottom: 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);