CSS实现漂亮的照片效果

不知道为啥我这个后端开发者竟然很喜欢玩儿ＣＳＳ＋ＪＳ。

---

首先看看我们照片效果图

851D1C22-8E8F-42FA-81D8-61B6E0D8DDD2.gif

分别实现了两种效果，

HTML

  
  
  
      
      
      
      
  
  
  
  
    
曲线阴影
  
  
  
  
    
![](img/1.jpg)
  
    
![](img/2.jpg)
  
    
![](img/3.jpg)
  
  
  
  ![](img/1.jpg)  
  

  

  
  
  

CSS

/*Global begin*/  
*{  
    margin: 0;  
    border:0;  
}  
body{  
    font-family: Arial;  
    text-align: center;  
}  
/*Gloal end 曲线阴影 begin*/  
.row{  
    margin:20px auto;  
    width: 80%;  
    height: 200px;  
}  
.row h1{  
    height: 200px;  
    line-height: 200px;  
}  
.effect{  
    position: relative;  
    box-shadow:0 4px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.2) inset;  
    -webkit-box-shadow:0 4px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.2) inset;  
    -moz-box-shadow:0 4px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.2) inset;  
    -o-box-shadow:0 4px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.2) inset;  
    -ms-box-shadow:0 4px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.2) inset;  
    background: #fff;  
    text-align: center;  
    vertical-align: center;  
  
}  
.effect:after,.effect:before{  
    position: absolute;  
    content: '';  
    left:2%;  
    right: 2%;  
    top:50%;  
    bottom: 0%;  
    border-radius: 30%/20%;  
    box-shadow: 0 0 40px rgba(0,0,0,0.8);  
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);  
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);  
    -o-box-shadow: 0 0 20px rgba(0,0,0,0.8);  
    -ms-box-shadow: 0 0 20px rgba(0,0,0,0.8);  
    z-index: -1;  
}  
/*曲线阴影 end 翘角阴影begin*/  
.box{  
    width:980px;  
    list-style: none;  
    overflow: hidden;  
}  
.box li{  
    background: #fff;  
    float: left;  
    width:300px;  
    height: 200px;  
    margin: 20px 10px;  
    border:2px solid #efefef;  
    box-shadow: 0 0 40px rgba(0,0,0,0.1) inset;  
    position: relative;  
}  
.box li img{  
    display: block;  
    width:290px;  
    height: 190px;  
    margin:5px;  
}  
.box li:before{  
    content: '';  
    position: absolute;  
    left:3%;  
    right:3%;  
    height: 80%;  
    bottom: 3%;  
    z-index: -1;  
    transform:skew(-10deg) rotate(-3deg);  
    -webkit-transform:skew(-10deg) rotate(-3deg);  
    -moz-transform:skew(-10deg) rotate(-3deg);  
    -o-transform:skew(-10deg) rotate(-3deg);  
    -ms-transform:skew(-10deg) rotate(-3deg);  
    box-shadow: 0 8px 10px rgba(0,0,0,0.8);  
    -webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.8);  
    -moz-box-shadow: 0 8px 10px rgba(0,0,0,0.8);  
    -o-box-shadow: 0 8px 10px rgba(0,0,0,0.8);  
    -ms-box-shadow: 0 8px 10px rgba(0,0,0,0.8);  
}  
.box li:after{  
    content: '';  
    position: absolute;  
    left:3%;  
    right:3%;  
    height: 80%;  
    bottom: 3%;  
    z-index: -1;  
    transform:skew(10deg) rotate(3deg);  
    -webkit-transform:skew(10deg) rotate(3deg);  
    -moz-transform:skew(10deg) rotate(3deg);  
    -o-transform:skew(10deg) rotate(3deg);  
    -ms-transform:skew(10deg) rotate(3deg);  
    box-shadow: 0 8px 10px rgba(0,0,0,0.8);  
    -webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.8);  
    -moz-box-shadow: 0 8px 10px rgba(0,0,0,0.8);  
    -o-box-shadow: 0 8px 10px rgba(0,0,0,0.8);  
    -ms-box-shadow: 0 8px 10px rgba(0,0,0,0.8);  
}  
/*翘脚阴影end 相框begin*/  
.noborder{  
    margin: 10px auto;  
    border-radius: 20px;  
    box-shadow: 0 0 3px rgba(0,0,0,0.9);  
    width: 500px;  
    height: 280px;  
    overflow: hidden;  
    transition:box-shadow 0.3s ease-in;  
    -webkit-transition:box-shadow 0.3s ease-in;  
    -moz-transition:box-shadow 0.3s ease-in;  
    -o-transition:box-shadow 0.3s ease-in;  
    -ms-transition:box-shadow 0.3s ease-in;  
}  
.noborder img{  
    width: 500px;  
    border-radius: 20px;  
    transition:all 0.3s ease-in;  
    -webkit-transition:all 0.3s ease-in;  
    -moz-transition:all 0.3s ease-in;  
    -o-transition:all 0.3s ease-in;  
    -ms-transition:all 0.3s ease-in;  
}  
.noborder:hover{  
    box-shadow:0 0 20px rgba(0,0,0,0.9);  
  
}  
.noborder img:hover{  
    /*transform:scale(1.02); //用scale缩放四个角落有瑕疵，不知道怎么调*/  
    zoom:1.005;  
}  
/*相框end*/