css特效实例——纯css实现带边角卷边阴影的纸

<template>
    <div class="container">
        <div class="page">
            <h4 class="myTitle">一些示例文字</h4>
            <p>有个老头儿的狗死了，...</p>
            <p>本来抱着大哭一场...</p>
            <p>今天全家看...</p>
            <p>病童："打针前为什么..."</p>
        </div>
    </div>
</template>
<style scoped>
    .container {
        text-align: center;
        padding: 30px;
        background-color: #666;
        /* 创建层叠上下文 */
        position: relative;
        z-index: 0;
    }
 
    /* 标题胶带 */
    .myTitle: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 {
        margin: 0px auto;
        padding: 30px;
        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;
    }
</style>