不知道为啥我这个后端开发者竟然很喜欢玩儿ＣＳＳ＋ＪＳ。
首先看看我们照片效果图
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></li>
<li></li>
<li></li>
</ul>
<div class="noborder">
</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*/
网友评论