了解box-shadow 转载自 css3 box-shadow
案例转载自 曲边阴影 翘边阴影
学习css3 skew 转载自 transform skew() 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阴影测试</title>
<style type="text/css">
div{
text-align: center;
height: 200px;
width: 500px;
line-height: 200px;
/*一定要设置背景颜色，否则为透明的话 折叠的效果会看不出来！*/
background-color: white;
margin: 60px;
}
.box-shadow1{
position: relative;
box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
/*在元素后面插入新的内容，即插入副阴影*/
/*伪类的用法*/
.box-shadow1:after{
height: 50px;
width: 480px;
content:"";
position:absolute;
background:white;
bottom: 0px;
left: 10px;
right: 10px;
/*设置副阴影在主阴影的下面*/
z-index: -1;
box-shadow: 0 0 20px rgba(0,0,0,0.7);
border-radius: 100px/10px;
}
.box-shadow2{
position:relative;
box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
.box-shadow2:before,.box-shadow2:after{
content: "";
position:absolute;
top:20px;
bottom: 22px;
background: transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.7);
/*设置副阴影在主阴影的下面*/
z-index: -1;
background: #fff;
}
.box-shadow2:before{
left: 22px;
right:12px;
/*将副阴影进行倾斜和旋转*/
transform: skew(-12deg) rotate(-4deg);
}
.box-shadow2:after{
left: 12px;
right:22px;
/*将副阴影进行倾斜和旋转*/
transform: skew(12deg) rotate(5deg);
}
</style>
</head>
<body>
<div class="box-shadow1">曲边阴影</div>
<div class="box-shadow2">翘边阴影</div>
</body>
</html>
效果图
