CSS实现漂亮的照片效果

作者: 蓝山牧童 | 来源:发表于2017-03-07 12:47 被阅读54次

CSS实现漂亮的照片效果
CSS中特殊效果的实现方案
CSS实现浮动阴影效果
随手收集
Front-web 启示录
2019-04-29
tab切换样式实现
强大的CSS：3种姿势实现26个英文字母的案例
2018-08-31 基于CSS3D视角，实现视差滚动
使用React实现无缝轮播

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

首先看看我们照片效果图

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

分别实现了两种效果，

HTML

<!DOCTYPE>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width" initial-scale="1">  
    <title>曲线阴影和翘边阴影</title>  
    <link rel="stylesheet" type="text/css" href="css/style.css">  
</head>  
<body>  
  <div class="row effect">  
    <h1>曲线阴影</h1>  
  </div>  
<ul class="box">  
    <li>![](img/1.jpg)</li>  
    <li>![](img/2.jpg)</li>  
    <li>![](img/3.jpg)</li>  
</ul>  
<div class="noborder">  
  ![](img/1.jpg)  
</div>  
<br>  
<br>  
</body>  
</html>

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*/