有弧度的阴影

前端入坑纪 05

又是一个阳光明媚的日子，午后的慵懒，赶不走的是分享前端经验的激情。
闲言少叙，先上图为敬！

效果如图

一等大事：项目链接
Ps:网页背景为黑色，请点页面里的“查看源码”，观看效果。

HTML 结构

<div class="wrp">
    <div>
        我是个Box
    </div>
</div>

CSS 结构

        // 包裹的盒子做了绝对垂直居中定位
        .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;
            //table-cell使得盒子里的内容垂直居中
            display: table-cell;
            vertical-align: middle;
        }
        
        // 阴影的实现原理
        .wrp>div::after {
            content: "";
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 25px;
            left: 0;
            bottom: -26px;
            box-shadow: 0 -12px 12px rgba(0, 0, 0, .28);
            border-radius: 50%;
        }

首先给主角盒子建立了个伪元素，通过圆角属性将它变成椭圆形。接着赋予它Y方向负投影后，最后通过z-index置于主角盒子的下一层

Ps:My skill's not better enough! 如有错漏，还请不吝赐教