上回@格子同学使用div模仿了一个价格表格，外观优美，只是其中有一些内容和样式结合在一起，分离不够完美。今天她再次为大家制作了一个价格表格。这次案例中修正了上一回的内容与样式的结合问题，并且利用CSS3制作出完美的UI效果。其中最为有特色的就是CSS3渐变的运用。第一使用渐变制作了一个大背景，第二使用渐变制作了一个网格纹理效果，第三使用渐变制作了锯齿花边效果。在这三个效果中应数锯齿花边难做，如果你不知道如何制作这样的效果，不仿跟着这个案例往下看看。
HTML结构
<div class="tableWrap">
<div class="table light">
<h2>LIGHT<em>great for small business</em></h2>
<div class="price">
<span>$<em>5</em></span>
<span>MONTHLY</span>
<button type="button">JOIN</button>
</div>
<ul>
<li>12/24 Tech Support</li>
<li>Advanced Options</li>
<li>100GB Storage</li>
<li>1GB Bandwidth</li>
</ul>
<p>Known locally as “SoMa”, this neighborhood was home to thd dot.com boom and boasts.</p>
</div>
<div class="table run">
<h2>RUN<em>great for small business</em></h2>
<div class="price">
<span>$<em>9</em>59</span>
<span>MONTHLY</span>
<button type="button">JOIN</button>
</div>
<ul>
<li>12/24 Tech Support</li>
<li>Advanced Options</li>
<li>100GB Storage</li>
<li>1GB Bandwidth</li>
</ul>
<p>Known locally as “SoMa”, this neighborhood was home to thd dot.com boom and boasts.</p>
</div>
<div class="table fly">
<h2>FLY<em>great for small business</em></h2>
<div class="price">
<span>$<em>12</em></span>
<span>MONTHLY</span>
<button type="button">JOIN</button>
</div>
<ul>
<li>12/24 Tech Support</li>
<li>Advanced Options</li>
<li>100GB Storage</li>
<li>1GB Bandwidth</li>
</ul>
<p>Known locally as “SoMa”, this neighborhood was home to thd dot.com boom and boasts.</p>
</div>
</div>
CSS 代码
/*设置body样式*/
body{
font-size:12px;
font-family:Verdana;
-webkit-text-size-adjust:none;
background: -*-linear-gradient(left, #464f76, #553a65, #6c3c4a, #683a4a);/*渐变制作多色渐变*/
}
/*引用clock字体*/
@font-face{
font-family:"fonticon";
src:url(font/clock.eot);
src:url(font/clock.eot#iefix) format("embedded-opentype"),
url(font/clock.woff) format("woff"),
url(font/clock.ttf) format("truetype"),
url(font/clock.svg) format("svg");
font-weight:normal;
font-style:normal;
}
/*表格容器*/
.tableWrap{
width:750px;
margin:50px auto; /*居中*/
}
/*表格*/
.table{
width:215px;
border:none;
border-radius:5px;
color:#fff;
float:left;
margin-right:20px;
}
/*表格标题*/
.table > h2{
font-size:26px;
text-align:center;
text-shadow:0 0 2px rgba(0,0,0,.3);
box-shadow:inset 0 1px 0px rgba(255,255,255,.5);/*制作内发光效果*/
padding-top:14px;
height:65px;
border-radius:5px 5px 0 0;
/*渐变配合background-size制作网格纹理*/
background-color:rgba(107,92,147,.6);
background-size: 4px 4px;
background-image: -*-linear-gradient(45deg, #706096 25%, transparent 25%, transparent 75%, #706096 75%, #706096), -*-linear-gradient(-45deg, #706096 25%, transparent 25%, transparent 75%, #706096 75%, #706096);
}
/*表格次标题*/
.table > h2 em{
display:block;
font-size:12px;
color:#fff;
line-height:22px;
font-weight:normal;
}
/*中间表格网格纹理效果*/
.table:nth-child(2) > h2{
background-color:#ecb811;
background-size: 4px 4px;
background-image: -*-linear-gradient(45deg, #f0bf16 25%, transparent 25%, transparent 75%, #f0bf16 75%, #f0bf16), -*-linear-gradient(-45deg, #f0bf16 25%, transparent 25%, transparent 75%, #f0bf16 75%, #f0bf16);
}
/*价格标签*/
.table .price{
background:#eddff7;
padding:30px 0 0;
text-align:center;
position:relative;
}
/*锯齿花边效果*/
.table .price:after{
display:block;
content:"";
height:10px;
margin-top:20px;
background-color:#2a1e33;
background-size:10px 20px;
background-image:linear-gradient(45deg, #eddff7 25%, transparent 25%, transparent),
linear-gradient(-45deg, #eddff7 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #eddff7 75%),
linear-gradient(-45deg, transparent 75%, #eddff7 75%);
}
.table:nth-child(2) .price{
background:#f4eacd;
}
.table:nth-child(2) .price:after{
background-image:linear-gradient(45deg, #f4eacd 25%, transparent 25%, transparent),
linear-gradient(-45deg, #f4eacd 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #f4eacd 75%),
linear-gradient(-45deg, transparent 75%, #f4eacd 75%);
}
.table .price span{
display:block;
color:#9c6dbd;
font-size:24px;
font-weight:bold;
margin-top:-15px;
}
.table:nth-child(2) .price span{
color:#eca013;
}
.table .price span em{
font-size:50px;
font-style:normal;
vertical-align:-10px;
}
.table .price span:nth-child(2){
font-size:14px;
margin-top:-10px;
font-family:Helvetica;
}
/*join按钮*/
.table .price button{
position:absolute;
color:#fff;
font-size:14px;
font-weight:bold;
right:-5px;
border:none;
top:38px;
width:62px;
height:32px;
line-height:32px;
background:-*-linear-gradient(top,#ba8bdb,#8b5bac);
box-shadow:0 0 2px rgba(0,0,0,.5);
}
.table:nth-child(2) .price button{
color:#fff;
background:-*-linear-gradient(top,#f1c312,#ec9f13);
}
/*按钮ribbon效果*/
.table .price button:before{
display:inline-block;
content:"";
position:absolute;
top:-8px;
left:-5px;
border-style:solid;
border-color:transparent #EDDFF7 transparent transparent;
border-width:24px 12px;
transform: rotate(180deg);
}
.table:nth-child(2) .price button:before{
border-color:transparent #f4eacd transparent transparent;
}
.table .price button:after{
display:inline-block;
content:"";
position:absolute;
top:31px;
right:0;
border-style:solid;
border-color:transparent transparent #1A1D1E #1A1D1E;
border-width:3px 2px;
transform: rotate(90deg);
}
/*表格列表效果*/
.table ul{
background:rgba(0,0,0,.5);
padding:30px 0;
}
.table ul li{
padding-left:15px;
border-bottom:solid 1px #5c5971;
line-height:30px;
cursor:pointer;
}
.table ul li:nth-child(4), .table ul li:last-child{
border-bottom:none;
}
/*列表前icon实现*/
.table ul li:before{
font-family:"fonticon";
display:inline-block;
content:"\1F554";
font-size:16px;
vertical-align:-1px;
margin-right:8px;
}
.table ul li:nth-child(2):before{
content:"\1f4c1";
font-size:12px;
vertical-align:1px;
}
.table ul li:nth-child(3):before{
content:"\2605";
vertical-align:-2px;
}
.table ul li:nth-child(4):before{
content:"\2665";
vertical-align:-2px;
}
.table ul li:hover{
background:rgba(0,0,0,.15);
box-shadow:inset 0 0 2px #000;
}
.table p {
border-radius: 0 0 5px 5px;
background: rgba(0, 0, 0, .5);
padding: 0 15px 30px;
text-align: center;
}
如需转载，烦请注明出处：http://www.w3cplus.com/demo/pure-css3-create-price-table2.html