前端样式 盒子的翘边阴影 (利用伪元素)

CSS样式

<style>
#box1,#box2 {
        width: 500px;
        padding: 10px;
        min-height: 200px;
        background: white;
        margin: 100px auto;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset;
        position: relative;
    }
    #box1::after{
        content: "";
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: 10px;
        height: 50px;
        box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        z-index: -1;
    }
    #box2::after{
        content:"";
        position: absolute;
        width: 440px;
        height: 100px;
        bottom: 35px;
        left: 35px;
        box-shadow: -20px 20px 25px rgba(0, 0, 0, 0.6);
        border: 1px solid #000; 
        transform: skewY(-8deg) rotate(2deg);
        z-index: -1;
    }
    #box2::before{
        content:"";
        position: absolute;
        width: 440px;
        height: 100px;
        bottom: 35px;
        right: 35px;
        box-shadow: 20px 20px 25px rgba(0, 0, 0, 0.6);
        border: 1px solid #000; 
        transform: skewY(8deg) rotate(-2deg);
        z-index: -1;
    }
</style>

HTML元素

 <div id="box1"></div>
 <div id="box2"></div>

如图