曲線陰影：利用：after和：before僞類創造兩個與父級相同的元素，利用border-radius實現曲線陰影。
翹角陰影：同樣是利用上面兩個僞類創造元素，利用transform變形與旋轉實現角度陰影具體代碼：
demo下載
慕課網視頻
曲線陰影
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3實現曲線陰影和翹邊陰影</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap curve">
<h1>Shadow Curve</h1>
</div>
</body>
</html>css
body{
font-family: Arial;
font-size: 20px;
}
body,ul{
list-style: none;
margin: 0;
padding: 0;
}
.wrap{
position: relative;
width: 60%;
height: 200px;
margin: 50px auto;
text-align: center;
line-height: 200px;
background-color:#fff;
}
.curve{
height: 200px;
position: relative;
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3),
0px 0px 20px rgba(255,0,0,0.1) inset;
}
.curve:after,.curve:before{
content: '';
position: absolute;
z-index: -1;
top: 50%;
bottom: 0;
left: 16px;
right: 16px;
background: red;
box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
border-radius: 100px/10px;
}翹角陰影
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS翹邊陰影</title>
<link rel="stylesheet" href="css/Alice.css">
</head>
<body>
<ul>
<li>
<img src="images/photo1.jpg" alt="" />
</li>
<li>
<img src="images/photo2.jpg" alt="" />
</li>
<li>
<img src="images/photo3.jpg" alt="" />
</li>
</ul>
</body>
</html>CSS
ul{
width: 1200px;
height: 240px;
margin: 50px auto;
display: flex;
justify-content: space-between;
}
ul li{
position: relative;
width: 340px;
height:240px;
float: left;
box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
ul img{
width: 300px;
height: 200px;
}
ul li:before,ul li:after{
content: '';
position: absolute;
z-index: -2;
bottom: 19px;
width: 90%;
height: 80%;
background-color: transparent;
box-shadow:0px 8px 20px rgba(0,0,0,0.8);
transform:skewX(10deg) rotate(5deg);
}
ul li:before{
left: 12px;
}
ul li:after{
right: 12px;
transform:skewX(-10deg) rotate(-5deg);
}