我们将运用在文字上的技巧，扩展延伸到容器上，就能得到最近比较火的拟态风格阴影，其原理也是大同小异。

两个阴影，使用两个相反的方向，使用两组对比明显的颜色值，来实现凹凸效果。与文字不同的是，这里的凹效果，我们需要使用盒子的内阴影实现。

    <div>新拟态风格阴影</div>
    <div>新拟态风格阴影</div>

    div {
        width: 120px;
        height: 120px;
        background: #e9ecef;
        color: #333;
        box-shadow:
            7px 7px 12px rgba(0, 0, 0, .4),
            -7px -7px 12px rgba(255, 255, 255, .9);
    }

    div:nth-child(2) {
        box-shadow:
            inset -7px -7px 12px rgba(255, 255, 255, .9),
            inset 7px 7px 12px rgba(0, 0, 0, .4);
    }

这样，就可以得到拟态风格的按钮

再通过一个简单的过渡，就可以实现整个点击的交互：

    div {
        transition: .2s all;
        box-shadow:
            7px 7px 12px rgba(0, 0, 0, .4),
            -7px -7px 12px rgba(255, 255, 255, .9),
            inset 0 0 0x rgba(255, 255, 255, .9),
            inset 0 0 0 rgba(0, 0, 0, .4);
        
        &:active {
            box-shadow:
                0 0 0 rgba(0, 0, 0, .4),
                0 0 0 rgba(255, 255, 255, .9),
                inset -7px -7px 12px rgba(255, 255, 255, .9),
                inset 7px 7px 12px rgba(0, 0, 0, .4);
        }
    }