css複雜陰影製作
——我一直不太信任自己的記憶力，所以我把它們都寫下來
在網頁上大家都想把圖片展示的漂亮一點，下面我們來看看兩種展示方式，先看效果圖，這個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 src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
</ul>
<div class="noborder">
<img src="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*/
下載地址 box-shadow.zip