CSS3实现纸张边角卷起效果

html代码

 1 <body>
 2         <div class="page">
 3             <div class="page-box">
 4                 <h1>
 5                     兔子先生
 6                 </h1>
 7                 <p>
 8                     这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。
 9                 </p>
10                 <p>
11                     沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。
12                 </p>
13                 <p>
14                     路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
15                 </p>
16                 <p>
17                     忽然想起采莲的事情来了。采莲是江南的旧俗，似乎很早就有，而六朝时为盛；从诗歌里可以约略知道。采莲的是少年的女子，她们是荡着小船，唱着艳歌去的。采莲人不用说很多，还有看采莲的人。那是一个热闹的季节，也是一个风流的季节。梁元帝《采莲赋》里说得好：
18                 </p>
19                 
20 <pre>
21     于是妖童媛女，荡舟心许；
22     鷁首徐回，兼传羽杯；
23     欋将移而藻挂，船欲动而萍开。
24     尔其纤腰束素，迁延顾步；
25     夏始春余，叶嫩花初，
26     恐沾裳而浅笑，畏倾船而敛裾。
27 </pre>
28                 <p>
29                     可见当时嬉游的光景了。这真是有趣的事，可惜我们现在早已无福消受了。
30                 </p>
31                 <p>
32                     于是又记起《西洲曲》里的句子：
33                 </p>
34                 <pre>
35                     采莲南塘秋，莲花过人头；
36                     低头弄莲子，莲子清如水。
37                 </pre>
38                 <p>
39                     今晚若有采莲人，这儿的莲花也算得“过人头”了；只不见一些流水的影子，是不行的。这令我到底惦着江南了。——这样想着，猛一抬头，不觉已是自己的门前；轻轻地推门进去，什么声息也没有，妻已睡熟好久了。
40                 </p>
41                 <div class="author">
42                     作者:兔子先生
43                 </div>
44             </div>
45         </div>
46     </body>

css代码

 1 <style type="text/css">
 2             *{
 3                 margin: 0;
 4                 padding: 0;
 5                 box-sizing: border-box;
 6             }
 7             body{
 8                 margin: 0 auto;
 9                 width: 660px;
10                 padding: 50px 0;
11                 background: #eee;
12                 font-family: "STZhongsong";
13                 font-size: 16px;
14                 line-height: 20px;
15             }
16             .page,.page-box{
17                 margin: 0 auto;
18                 width: 600px;
19                 padding: 50px 0 0 60px;
20                 background: #fff;
21                 border-radius: 20px;
22                 text-align: justify;
23             }
24             .page-box{
25                 padding: 0 60px 40px 0;
26             }
27             .page{
28                 position: relative;
29                 margin-left: 0;
30                 filter: drop-shadow(0px 0px 15px #bbb);
31             }
32             .page:before{
33                 content: '';
34                 display: block;
35                 position: absolute;
36                 right:-60px;
37                 top:0;
38                 width: 60px;
39                 height: 50px;
40                 background: linear-gradient(42deg, #ddd 30%, rgba(0,0,0,0) 40%);
41             }
42             h1{
43                 margin-bottom: 20px;
44                 text-align: center;
45             }
46             p,pre{
47                 margin-bottom: 5px;
48             }
49             pre{
50                 padding: 5px 0;
51                 font-family: "STXingkai";
52                 font-size: 16px;
53             }
54             p{
55                 text-indent: 2em;
56             }
57             .author{
58                 padding-top: 20px;
59                 text-align: right;
60                 font-family: "FZShuTi";
61                 color: green;
62             }
63         </style>