css做纸张重叠,css 实现的纸张卷曲效果

####html

####css

*{margin:0;box-sizing:border-box;}

body{

padding:50px 0;

background: #eee;

font-family: Arial, Helvetica, sans-serif;

line-height: 20px;

}

.page-wrap,.page-inner{

margin:0 auto;

width:600px;

padding:50px 0 0 60px;

background:#fff;

/* border-radius: 20px; */

text-align: justify;

}

.page-inner{

padding:0 60px 40px 0;

}

.page-wrap{

position: relative;

/* 高斯模糊，过滤器 */

filter:drop-shadow(0px 0px 15px #bbb);

}

.page-wrap:before{

content:'';

display: block;

position: absolute;

right:-60px;

top:0;

width:60px;

height:50px;

background: linear-gradient(42deg,#ddd 30%,rgba(0,0,0,0) 40%)

}

h1{

margin-bottom: 20px;text-align:center;

}

p{

text-indent: 2em;margin-bottom: 5px;

}

####效果图