css怎么设置图片卷角效果,CSS3 带分隔线卷角贴纸效果

CSS

语言：

CSSSCSS

确定

body {

padding-top: 2.5em;

background-color: #666;

color: #333;

font-size: 84%;

font-family: "微软雅黑", "Yahei Mono";

}

a {

color: #fff;

position: absolute;

right: 1%;

top: 5px;

}

.title {

margin: 15px 0;

text-align: center;

}

.page {

width: 600px;

line-height: 30px;

margin: 0 auto;

padding: 15px 0 29px;

background-color: #f4f39e;

-moz-border-radius-bottomleft: 20px 500px;

-moz-border-radius-bottomright: 500px 30px;

-moz-border-radius-topright: 5px 100px;

-webkit-border-bottom-left-radius: 20px 500px;

-webkit-border-bottom-right-radius: 500px 30px;

-webkit-border-top-right-radius: 5px 100px;

border-bottom-left-radius: 20px 500px;

border-bottom-right-radius: 500px 30px;

border-top-right-radius: 5px 100px;

background: -moz-repeating-linear-gradient(top, #fcf59b, #fcf59b 29px, #81cbbc 30px);

background: -webkit-gradient(linear, left top, left bottom, from(#81cbbc), color-stop(2%, #fcf59b));

background: repeating-linear-gradient(top, #fcf59b, #fcf59b 29px, #81cbbc 30px);

-webkit-background-size: 100% 30px;

-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);

-webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);

box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);

text-shadow: 0 1px 0 #f6ef97;

position: relative;

}

.page:after {

width: 180px;

height: 30px;

content: " ";

margin-left: -90px;

border: 1px solid rgba(200, 200, 200, .8);

background: rgba(254, 254, 254, .6);

-moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);

-webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);

box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);

-moz-transform: rotate(-5deg);

-webkit-transform: rotate(-5deg);

-o-transform: rotate(-5deg);

transform: rotate(-5deg);

position: absolute;

left: 50%;

top: -15px;

}

.page p {

margin: 30px 0;

padding: 0 2em;

}