前端入坑纪 06
三线靠海的小城，下着小雨，飘着雾，看哪儿都是白蒙蒙的。码了一早上的业务代码，心情就跟这天气似的。还是来写个简书透透气吧~
如题，依旧还是个阴影，只是看着有点翘，嘿！嘿！嘿！
效果如图
一等大事：项目链接
Ps:网页背景为黑色，请点页面里的“查看源码”，观看效果。
HTML 结构
<div class="wrp">
<div>
我是个Box
</div>
</div>
这里的html和上次还是一样的
CSS 结构
body {
font-family: "微软雅黑";
}
.wrp {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 300px;
transform: translate(-150px, -100px);
text-align: center;
display: table;
z-index: 3;
}
.wrp>div {
position: relative;
background-color: lightskyblue;
display: table-cell;
vertical-align: middle;
}
.wrp>div::before {
content: "";
position: absolute;
z-index: -1;
width: 90%;
height: 20%;
left: 5px;
bottom: 10px;
box-shadow: 0 8px 8px rgba(0, 0, 0, .8);
transform: skew(-6deg, -3deg);
}
.wrp>div::after {
content: "";
position: absolute;
z-index: -1;
width: 90%;
height: 30%;
right: 5px;
bottom: 10px;
box-shadow: 0 8px 8px rgba(0, 0, 0, .8);
transform: skew(6deg, 3deg);
}
阴影的关键还是通过两个伪元素before和after，让他们变形后投影，然后垫在主角盒子的下面
