z-index负值与纸张卷边阴影模拟

HTML

<div class="container">
    <div class="page">
        <h4 class="title">一些示例文字</h4>
        <p>有个老头儿的狗死了，老头就把死狗打包托运准备带回家乡厚葬。但是托运的时候机场的人不知道是死的，下飞机的时候发现是死的，吓坏了。以为把狗托运死了。于是就派人去附近狗市买了一个一模一样的。后来这老头打开行李发现狗活了。于是老头给吓死了！</p>
        <p>本来抱着大哭一场的念头去观摩将爱情进行到底，结果从头笑到尾。波尔多那一场戏，徐静蕾对李亚鹏说："带我走吧。"李亚鹏答："大象怎么办？"（大象是徐静蕾的儿子）。结果您猜怎么着？邻座一个观众很严肃的说：装冰箱呀！</p>
        <p>今天全家看湖南卫视播放的古装片的时候，突然很脑残的问我爸：爸，你说我为什么要叫你做爸呢？——我爸弱弱的回答：你也可以叫我阿玛。。。</p>
        <p>病童："打针前为什么要擦棉球？" 父亲："那是酒精，先把你的屁股擦醉了，再打针就不痛了。" 病童："可是我还是痛呀！" 父亲："那是因为你屁股的酒量好啊！"</p>
    </div>
</div>


					    

CSS

body {margin:0; padding:0;}
.container {
    background-color: #666;
    padding: 4em 0;
    text-align: left;
    position: relative;
    z-index: 0;
}
.title { text-align: center; }
.title:after {
    content: "";
    width: 180px;
    height: 30px;
    margin-left: -90px;
    border: 1px solid rgba(200, 200, 200, .8);
    background: rgba(254, 254, 254, .6);
    box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
    position: absolute;
    left: 50%;
    top: -15px;
}
.page {
    width: 600px;
    max-width: 90%;
    margin: 0 auto;
    padding: 2em 0;
    background-color: #f4f39e;
    background: linear-gradient(to bottom, #f4f39e, #f5da41 60%, #fe6);
    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
    text-shadow: 0 1px 0 #f6ef97;
    position: relative;
}
.page:before {
    -webkit-transform: skew(-15deg) rotate(-5deg);
    -ms-transform: skew(-15deg) rotate(-5deg);
    transform: skew(-15deg) rotate(-5deg);
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    left: 0;
}
.page:after {
    -webkit-transform: skew(15deg) rotate(5deg);
    -ms-transform: skew(15deg) rotate(5deg);
    transform: skew(15deg) rotate(5deg);
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    right: 0;
}
.page:before, .page:after {
    width: 90%;
    height: 20%;
    content: "";
    box-shadow: 0 8px 16px rgba(0, 0, 0, .3);
    position: absolute;
    bottom: 0;
    z-index: -1;
}
.page p {
    line-height: 1.8;
    margin: 1em 0;
    padding: 0 2em;
}
					    

JS

//no