html css3 纸张,css3代码实现纸张卷边

/p>

Transitional//EN" "www.baidu.com">

CSS3纸张卷边效果paper

*{

margin:0;

padding:0;

}

body{

background:url(/jscss/demoimg/201206/bg-image.jpg);

}

.clear{

clear:both;

}

.paper{

background:url(/jscss/demoimg/201206/btn_tryit.png)

no-repeat 10px 0 #FFF;

position:relative;

height:auto;

width:860px;

margin:30px

auto;

padding:15px;

border:1px solid #CCC;

box-shadow:2px 1px 4px 2px rgba(0,0,0,0.3);

-webkit-transition:all 0.4s;

-moz-transition:all 0.4s;

-ms-transition:all 0.4s;

-o-transition:all 0.4s;

}

.paper:hover{

border-top-right-radius:140px 30px;

}

.paper:before, .paper:after{

content: "";

background:url(/jscss/demoimg/201206/linen-lt.png);

background:

-moz-linear-gradient(top, #ffffff 0%, #e5e5e5

100%);

background: -webkit-gradient(linear, left top,

left bottom, color-stop(0%,#ffffff),

color-stop(100%,#e5e5e5));

background:

-webkit-linear-gradient(top, #ffffff 0%,#e5e5e5

100%);

background:

-o-linear-gradient(top, #ffffff 0%,#e5e5e5

100%);

background:

-ms-linear-gradient(top, #ffffff 0%,#e5e5e5

100%);

background:

linear-gradient(top, #ffffff 0%,#e5e5e5

100%);

background:#FFF;

border:1px solid #CCC;

position: absolute;

z-index: -1;

box-shadow:2px 1px 4px 2px rgba(0,0,0,0.3);

}

.paper:before {

height:96%;

width:96%;

top:-20px;

left:20px;

}

.paper:after {

height:96%;

width:98%;

top:-10px;

left:10px;

}

.header,.content,footer{

float:left;

width:100%;

}

.header{

height:70px;

border-bottom:1px dashed #CCC;

}

.content{

height:auto;

min-height:760px;

}

footer{

height:70px;

}

.guide{

float:left;

font:20px Georgia, "Times New Roman", Times,

serif;

line-height:60px;

color:#CCC;

margin-left:120px;

}

.search {

background: transparent

url(/jscss/demoimg/201206/support_search.png) no-repeat;

width: 195px;

height: 35px;

border: 0;

outline: none;

padding: 3px 15px 0 39px;

line-height:35px;

font-size:18px;

float:right;

margin:10px;

}

.search:focus {

background-position: 0 -38px;

-moz-box-shadow:none;

-webkit-box-shadow:none;

box-shadow:none;

}

.avatar{

float:right;

background:#FFF;

margin:5px;

border:1px solid #CCC;

box-shadow:2px 1px 4px 1px rgba(0,0,0,0.3);

}

h1{

font:32px "Trebuchet MS", Arial, Helvetica,

sans-serif;

margin:10px 0 0;

}

table{

float:left;

width:600px;

font:16px "Trebuchet MS", Arial, Helvetica,

sans-serif;

list-style:none;

margin:10px 0;

padding:10px;

border:1px dashed #CCC;

}

tr{

height:30px;

line-height:30px;

}

.discription{

float:left;

width:600px;

height:auto;

margin:5px;

font:14px "Trebuchet MS", Arial, Helvetica,

sans-serif;

line-height:20px;

}

.discription p{

margin:10px 0;

letter-spacing:2px;

}

search for your

requset info

class="search">

Barack Hussein Obama

II

Name:	Barack Hussein Obama II
Sex :	male
Nationality :	U.S
Career :	President

class="avatar">

src="/jscss/demoimg/201206/FileOfficial_portrait_of_Barack_Obama.jpg" />

我爱你，爱爱爱你

笨蛋

class="footer">

class="clear">