弧度的阴影2——原来你叫翘边

前端入坑纪 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，让他们变形后投影，然后垫在主角盒子的下面