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

    -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%;   
    bottombottom: -1px;   
    left: 10px;   
   rightright: 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);   
}  

下面的代码就是怎么去实现翘边阴影的效果：

CSS Code复制内容到剪贴板

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