html代码

 <body>

         <div class="page">

             <div class="page-box">

                 <h1>

                     兔子先生

                 </h1>

                 <p>

                     这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。

                 </p>

                 <p>

                     沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。

                 </p>

                 <p>

                     路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。

                 </p>

                 <p>

                     忽然想起采莲的事情来了。采莲是江南的旧俗，似乎很早就有，而六朝时为盛；从诗歌里可以约略知道。采莲的是少年的女子，她们是荡着小船，唱着艳歌去的。采莲人不用说很多，还有看采莲的人。那是一个热闹的季节，也是一个风流的季节。梁元帝《采莲赋》里说得好：

                 </p>

 <pre>

     于是妖童媛女，荡舟心许；

     鷁首徐回，兼传羽杯；

     欋将移而藻挂，船欲动而萍开。

     尔其纤腰束素，迁延顾步；

     夏始春余，叶嫩花初，

     恐沾裳而浅笑，畏倾船而敛裾。

 </pre>

                 <p>

                     可见当时嬉游的光景了。这真是有趣的事，可惜我们现在早已无福消受了。

                 </p>

                 <p>

                     于是又记起《西洲曲》里的句子：

                 </p>

                 <pre>

                     采莲南塘秋，莲花过人头；

                     低头弄莲子，莲子清如水。

                 </pre>

                 <p>

                     今晚若有采莲人，这儿的莲花也算得“过人头”了；只不见一些流水的影子，是不行的。这令我到底惦着江南了。——这样想着，猛一抬头，不觉已是自己的门前；轻轻地推门进去，什么声息也没有，妻已睡熟好久了。

                 </p>

                 <div class="author">

                     作者:兔子先生

                 </div>

             </div>

         </div>

     </body>

css代码

 <style type="text/css">

             *{

                 margin:;

                 padding:;

                 box-sizing: border-box;

             }

             body{

                 margin: 0 auto;

                 width: 660px;

                 padding: 50px 0;

                 background: #eee;

                 font-family: "STZhongsong";

                 font-size: 16px;

                 line-height: 20px;

             }

             .page,.page-box{

                 margin: 0 auto;

                 width: 600px;

                 padding: 50px 0 0 60px;

                 background: #fff;

                 border-radius: 20px;

                 text-align: justify;

             }

             .page-box{

                 padding: 0 60px 40px 0;

             }

             .page{

                 position: relative;

                 margin-left:;

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

             }

             .page:before{

                 content: '';

                 display: block;

                 position: absolute;

                 right:-60px;

                 top:;

                 width: 60px;

                 height: 50px;

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

             }

             h1{

                 margin-bottom: 20px;

                 text-align: center;

             }

             p,pre{

                 margin-bottom: 5px;

             }

             pre{

                 padding: 5px 0;

                 font-family: "STXingkai";

                 font-size: 16px;

             }

             p{

                 text-indent: 2em;

             }

             .author{

                 padding-top: 20px;

                 text-align: right;

                 font-family: "FZShuTi";

                 color: green;

             }

         </style>

效果图

原文地址：http://www.qdfuns.com/notes/32244/ef7467af54279078256efc9c878ca10a.html

CSS3实现纸张边角卷起效果的更多相关文章

  1. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  2. Codrops 教程：基于 CSS3 的精美模态窗口效果

    Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...

  3. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  4. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  5. css3的滤镜模糊的效果

    最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴. 代码如下: div{//设置半透明滤镜效果 ...

  6. CSS3实现8种Loading效果【第二波】

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

  7. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

  8. CSS3实战开发:使用CSS3实现photoshop的过滤效果

    原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...

  9. CSS3下的渐变文字效果实现

    如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...

随机推荐

  1. 2.2.11同步synchronized方法无限等待与解决

    同步方法容易造成死循环. package com.cky.bean; /** * Created by edison on 2017/12/8. */ public class Service { s ...

  2. js 判断字符串中是否包含某个字符串(转载)

    from : https://www.cnblogs.com/ooo0/p/7741651.html String对象的方法 方法一: indexOf()   (推荐) var str = " ...

  3. hdu1176--免费馅饼(简单动态规划)

    都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人品实在是太好了,这馅饼别处都不掉,就掉落在他身旁的10米范围内.馅饼如果掉在了地上当然就 ...

  4. thrift使用总结

    转自 http://blog.csdn.net/qq_27784479/article/details/73250958 Apache Thrift软件框架用于可扩展的跨语言服务开发,简单来说就是RP ...

  5. hdu4048

    题意:给定m个数,还有n,n表示有一个长度为n的环,现在要求从M个数中选出若干个数,要求选出的数最大公约数为1,填充在n个位置中,选出的数可以重复,求多少种种方案.旋转当成一样的 . 思路:假设现在选 ...

  6. SRM387 div1

    250pt: 题目:有一些盒子(不大于50个),每个盒子里有一些大理石(最多50种颜色),然后给定每个盒子里每种颜色大理石的个数(没有为0),求最少操作几步满足: 1:最多只能一个盒子里有多种颜色,叫 ...

  7. 方案dp。。

    最近经常做到组合计数的题目,每当看到这种题目第一反应总是组合数学,然后要用到排列组合公式,以及容斥原理之类的..然后想啊想,最后还是不会做.. 但是比赛完之后一看,竟然是dp..例如前几天的口号匹配求 ...

  8. 广搜 poj3278 poj1426 poj3126

    Catch That Cow Time Limit: 2000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u Ja ...

  9. PICT用户手册 [转]

    PICT 3.3 User's Guide Jacek Czerwonka, Test Lead, Microsoft Corporation Overview Using PICT to Combi ...

  10. 关于等效的物理意义 On the Physical Meaning of Equivalence

    当我们谈到两个物理概念是等效的,这意味着: 1.它们拥有同样的属性.例如质量和能量都可以弯曲空间. 2.它们可以在设计实验中无法区分彼此.例如恒星系统中行星的质量与恒星的引力. 3.它们可以互相转化. ...