<code>
<div id="outcontenbox">
    <div id="intbox" class="boxshadow" >
        <p>这是演示~~yefengs.com</p>
        <p>折腾屋</p>
    </div>
</div>
</code>

<code>
    
#outcontenbox{
        width: 400px;
        height: 400px;
        display: block;
        background: rgba(226, 226, 226, 0.04);
        margin: 20px auto;
        padding-top: 30px;
        z-index: 2;
        position: relative;
    }
    #intbox{
        /*基础样式*/
        display: block;
        margin: 10px auto;
        width: 150px;
        height: 150px;
        background-color: #FFF;
        padding: 5px 5px 30px 5px;
        border: 1px solid #C7C3C1;
    }
    .boxshadow{
        /*定位，相对定位*/
        position: relative;
    }
    .boxshadow:before,.boxshadow:after {
        /*影子 主要用了伪类*/
        position: absolute;
        width: 35%;
        height: 10px;
        content: ' ';/*空内容*/
        left: 12px; 
        bottom: 19px; 
        background: rgba(0, 0, 0, 0);
        -webkit-transform: skew(-5deg) rotate(-4deg);
        -moz-transform: skew(-5deg) rotate(-4deg);
        -ms-transform: skew(-5deg) rotate(-4deg);
        -o-transform: skew(-5deg) rotate(-5deg);
        transform: skew(-5deg) rotate(-4deg);
        -webkit-box-shadow: 6px 18px 12px rgba(0, 0, 0, 0.6);
        -moz-box-shadow: 6px 18px 12px rgba(0,0,0,0.6);
        box-shadow: 6px 18px 12px rgba(0, 0, 0, 0.6);
        z-index: -1;  
        max-width: 300px; /* 最大宽度*/
}
.boxshadow:after {
left: auto; /*重新来个这段的目的 利用CSS优先级创建 右侧阴影，这段肯定是在 .boxshadow:before,.boxshadow:after 这段之后的~~*/
right: 12px;
-webkit-transform: skew(5deg) rotate(4deg);
-moz-transform: skew(5deg) rotate(4deg);
-ms-transform: skew(5deg) rotate(4deg);
-o-transform: skew(5deg) rotate(4deg);
transform: skew(5deg) rotate(4deg);
}

</code>