z-index负值与纸张卷边阴影模拟实例页面

展示

去论坛 »

一些示例文字

有个老头儿的狗死了，老头就把死狗打包托运准备带回家乡厚葬。但是托运的时候机场的人不知道是死的，下飞机的时候发现是死的，吓坏了。以为把狗托运死了。于是就派人去附近狗市买了一个一模一样的。后来这老头打开行李发现狗活了。于是老头给吓死了！

本来抱着大哭一场的念头去观摩将爱情进行到底，结果从头笑到尾。波尔多那一场戏，徐静蕾对李亚鹏说："带我走吧。"李亚鹏答："大象怎么办？"（大象是徐静蕾的儿子）。结果您猜怎么着？邻座一个观众很严肃的说：装冰箱呀！

今天全家看湖南卫视播放的古装片的时候，突然很脑残的问我爸：爸，你说我为什么要叫你做爸呢？——我爸弱弱的回答：你也可以叫我阿玛。。。

病童："打针前为什么要擦棉球？" 父亲："那是酒精，先把你的屁股擦醉了，再打针就不痛了。" 病童："可是我还是痛呀！" 父亲："那是因为你屁股的酒量好啊！"

代码

HTML：

<div class="container">
    <div class="page">
        <h4 class="title">一些示例文字</h4>
        <p>有个老头儿的狗死了，...</p>
        <p>本来抱着大哭一场...</p>
        <p>今天全家看...</p>
        <p>病童："打针前为什么..."</p>
    </div>
</div>

核心CSS：

.container {
    background-color: #666;
    /* 创建层叠上下文 */
    position: relative;
    z-index: 0;
}

/* 标题胶带 */
.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);
    transform: rotate(-5deg);
    position: absolute;
    left: 50%; top: -15px;
}
.page {
    width: 600px;
    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 {
    transform: skew(-15deg) rotate(-5deg);
    transform-origin: left bottom;
    left: 0;
}
.page:after {
    transform: skew(15deg) rotate(5deg);
    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;
}