CSS3圆角+投影效果带背景色的表格

时间：2013-12-04 17:23 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3圆角渐变表格[www.codesocang.com]源码搜藏网</title>
<style type="text/css">    
body{margin: 0;padding: 0;background: white url(http://www.codefans.net/jscss/demoimg/bgdemo2.jpg);}
#main{width: 960px;margin: 160px auto 0 auto;background: white;-moz-border-radius: 8px;-webkit-border-radius: 8px;padding: 30px;border: 1px solid #adaa9f;-moz-box-shadow: 0 2px 2px #9c9c9c;-webkit-box-shadow: 0 2px 2px #9c9c9c;}
.features-table{width: 100%;margin: 0 auto;border-collapse: separate;border-spacing: 0;text-shadow: 0 1px 0 #fff;color: #2a2a2a;background: #fafafa;background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff);/* Firefox 3.6*/background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));font-family: Verdana,Arial,Helvetica}
.features-table td{height: 50px;line-height: 50px;padding: 0 20px;border-bottom: 1px solid #cdcdcd;box-shadow: 0 1px 0 white;-moz-box-shadow: 0 1px 0 white;-webkit-box-shadow: 0 1px 0 white;white-space: nowrap;}
.no-border td{border-bottom: none;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;}
.col-cell{text-align: center;width: 150px;font: normal 1em Verdana, Arial, Helvetica;}
.col-cell1, .col-cell2{background: #efefef;background: rgba(144,144,144,0.15);border-right: 1px solid white;}
.col-cell3{background: #e7f3d4;background: rgba(184,243,85,0.3);}
.col-cellh{font: bold 1.3em 'trebuchet MS', 'Lucida Sans', Arial;-moz-border-radius-topright: 10px;-moz-border-radius-topleft: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;border-top: 1px solid #eaeaea !important;}
.col-cellf{font: bold 1.4em Georgia;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;border-bottom: 1px solid #dadada !important;}
</style>
</head>
<body>
<div id="main">
<table class="features-table">
	<tr>
		<td></td>
		<td class="col-cell col-cell1 col-cellh">Standard</td>
		<td class="col-cell col-cell2 col-cellh">Professional</td>
		<td class="col-cell col-cell3 col-cellh">Enterprise</td>			
	</tr>
	<tr>
		<td>Custom domain</td>
		<td class="col-cell col-cell1"><img src="http://www.codefans.net/jscss/demoimg/201311/check.png" width="16" height="16"></td>
		<td class="col-cell col-cell2"><img src="http://www.codefans.net/jscss/demoimg/201311/check.png" width="16" height="16"></td>
		<td class="col-cell col-cell3"><img src="http://www.codefans.net/jscss/demoimg/201311/check.png" width="16" height="16"></td>			
	</tr>
	<tr>
		<td>Advanced control</td>
		<td class="col-cell col-cell1"><img src="http://www.codefans.net/jscss/demoimg/201311/check.png" width="16" height="16"></td>
		<td class="col-cell col-cell2"><img src="http://www.codefans.net/jscss/demoimg/201311/check.png" width="16" height="16"></td>
		<td class="col-cell col-cell3"><img src="http://www.codefans.net/jscss/demoimg/201311/check.png" width="16" height="16"></td>			
	</tr>
	<tr>
		<td>Unlimited support</td>
		<td class="col-cell col-cell1"><img src="http://www.codefans.net/jscss/demoimg/201311/cross.png" width="16" height="16"></td>
		<td class="col-cell col-cell2"><img src="http://www.codefans.net/jscss/demoimg/201311/check.png" width="16" height="16"></td>
		<td class="col-cell col-cell3"><img src="http://www.codefans.net/jscss/demoimg/201311/check.png" width="16" height="16"></td>
	</tr>
	<tr>
		<td>User registration</td>
		<td class="col-cell col-cell1"><img src="http://www.codefans.net/jscss/demoimg/201311/cross.png" width="16" height="16"></td>
		<td class="col-cell col-cell2"><img src="http://www.codefans.net/jscss/demoimg/201311/cross.png" width="16" height="16"></td>
		<td class="col-cell col-cell3"><img src="http://www.codefans.net/jscss/demoimg/201311/check.png" width="16" height="16"></td>
	</tr>
	<tr class="no-border">
		<td></td>
		<td class="col-cell col-cell1 col-cellf">$99</td>
		<td class="col-cell col-cell2 col-cellf">$199</td>
		<td class="col-cell col-cell3 col-cellf">$399</td>				
	</tr>		
</table>
</div>
</div>
</body>
</html>

CSS3圆角+投影效果带背景色的表格

网页特效