[CSS3技术]CSS3制作价格标牌

[tr][td]一个使用CSS3制作价格标牌的例子，这个例子相对来比较简单，最主要的关键点是如何使用border-radius来制作圆形的效果。同时这个例子中还运用了CSS3的渐变，阴影。



HTML CODE

 
 $99
 *Premium
 

 
 FREE
 *Trial Only
 

CSS CODE

html{
 background-image: url(data:image/jpeg;base64,...;}
body{
 color:#fff;
 background:-webkit-radial-gradient(circle,rgba(255,255,255,.1),rgba(255,255,255,0));
 background:-moz-radial-gradient(circle,rgba(255,255,255,.1),rgba(255,255,255,0));
 background:-o-radial-gradient(circle,rgba(255,255,255,.1),rgba(255,255,255,0));
 background:-ms-radial-gradient(circle,rgba(255,255,255,.1),rgba(255,255,255,0));
 background:radial-gradient(circle,rgba(255,255,255,.1),rgba(255,255,255,0));
 height: 100%;
 padding: 50px;
}
.box{
 width: 350px;
 text-align:center;
 margin:50px auto;
}
.round{
 width: 130px;
 height: 140px;
 background: #fff;
 border-radius: 65px 0 65px 65px;
 float: left;
 margin-right: 20px;
}
.red{
 background: -webkit-linear-gradient(top,#f9443e,#c93532);
 background: -moz-linear-gradient(top,#f9443e,#c93532);
 background: -o-linear-gradient(top,#f9443e,#c93532);
 background: -ms-linear-gradient(top,#f9443e,#c93532);
 background: linear-gradient(top,#f9443e,#c93532);
 border:1px solid #c8544f;
}
.blue{
 background: -webkit-linear-gradient(top,#64e7fe,#1ac7eb);
 background: -moz-linear-gradient(top,#64e7fe,#1ac7eb);
 background: -o-linear-gradient(top,#64e7fe,#1ac7eb);
 background: -ms-linear-gradient(top,#64e7fe,#1ac7eb);
 background: linear-gradient(top,#64e7fe,#1ac7eb);
 border:1px solid #1dadd3;
}
.sup {
 vertical-align:super;
 font-size: 20px;
}
.round span:first-child{
 display:block;
 padding-top: 20px;
 height: 55px;
 font:50px bold "Impact";
}
.round span:last-child{
 height: 18px;
 font:italic normal 13px "arial";
 color:#ffdc7c;
}

.red span:first-child{
 margin-bottom: 5px;
 padding-bottom:5px;
 text-shadow:0 1px 1px #000;
 border-bottom: 1px solid #b03130;
 box-shadow: 0 1px 0 #dd5a59;
}
.blue span:first-child{
 color:rgba(0,160,206,.8);
 text-shadow:0 1px 2px #7ee5f5, 0 0 0 #026e97;
}
.blue span:last-child{
 color:#fff;
}

下载：CSS3PriceTag.zip

[/td][/tr]