曲线阴影

我们在给某些元素阴影的时候，，往往比较生硬，看起来不是那么的生动，例如下面我们距离的白色盒子。我们能否使盒子变得更加的灵巧呢，现在我们来分享一个通过双伪元素来实现曲线阴影。
首先我们来看看普通的加阴影后的盒子：

代码是这样的：

 <div class="effect">
        <h1>曲线阴影</h1>
    </div>

 .effect {
            width: 70%;
            height: 200px;
            margin: 50px auto;
            background: #fff;
            position: relative;
            /* 设置盒子的阴影 */
            box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
         /* 设置盒子里面字体大小文本的位置 */
        .effect h1 {
            font-size: 20px;
            text-align: center;
            line-height: 200px;
        }

通过观察我们就发现，上面盒子的阴影比较生硬，过渡得不是那么自然，想让阴影过度得更自然，可以在父元素上面设置内阴影。

 .effect:after,
        .effect:before {
            content: '';
            background: #fff;
            position: absolute;
            top: 50%;
            bottom: 0;
            left: 10px;
            right: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
            border-radius: 100px/10px;
            z-index: -1;
        } 

通过双伪元素设置后的曲线阴影：
如果伪元素做出来的阴影不够深，可以调整不透明度，也可以设置多一个伪元素，这里设置了after 和 before。

原理：通过伪元素做出第二层阴影效果。

注意：伪元素的尺寸要比父元素小一点，并且z-index要在最下面。