当前位置：首页 > 网页特效 > css样式 >

CSS3表格特效边框阴影+圆角有立体感

时间：2013-12-04 17:20 来源：互联网作者：源码搜藏收藏推荐

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3制作的圆角立体边框表格效果[www.codesocang.com]源码搜藏网</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function() {
    $("table tr:nth-child(odd)").addClass("odd-row");
	$("table td:first-child, table th:first-child").addClass("first");
	$("table td:last-child, table th:last-child").addClass("last");
});
</script>
<style type="text/css">
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {
	margin:0;
	padding:0;
	font:12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif;
	color: #555;
	background:#f5f5f5;
}
a {color:#666;}
#content {width:65%; max-width:690px; margin:6% auto 0;}
table {
	overflow:hidden;
	border:1px solid #d3d3d3;
	background:#fefefe;
	width:70%;
	margin:5% auto 0;
	-moz-border-radius:5px; /* FF1+ */
	-webkit-border-radius:5px; /* Saf3-4 */
	border-radius:5px;
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
th, td {padding:18px 28px 18px; text-align:center; }
th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}
td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
tr.odd-row td {background:#f6f6f6;}
td.first, th.first {text-align:left}
td.last {border-right:none;}
td {
	background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
	background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}
tr.odd-row td {
background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}
th {
	background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
	background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
tr:first-child th.first {
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px; /* Saf3-4 */
}
tr:first-child th.last {
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px; /* Saf3-4 */
}
tr:last-child td.first {
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}
tr:last-child td.last {
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}
</style>
</head>
<body>
<div id="content">
    <table cellspacing="0">
    <tr><th>任务细节</th><th>处理进程</th><th>虚假任务</th></tr>
    <tr><td>看一看<a href="/">简单设计</a></td><td>100%</td><td>No</td></tr>
    <tr><td>带阴影的CSS3表格</td><td>100%</td><td>Yes</td></tr>
    <tr><td>表格边框圆角</td><td>50%</td><td>Yes</td></tr>
    <tr><td>Take a stretch break</td><td>0%</td><td>Yes</td></tr>
    <tr><td>在你的网页中加入本效果</td><td>100%</td><td>Yes</td></tr>
    </table>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

CSS3编写实现的一款表格边框效果，把边框修饰成了圆角，而且加入了阴影效果，整体看上去像是突起的，有立体感，比一般的表格看着更美观。代码中考虑到兼容性，对Safari浏览器的兼容也做了处理，火狐和Chrome的兼容那就更不用了。不过CSS3现在不支持IE8及更低版本的IE浏览器，所以如果要在IE下查看效果，必需使用IE9及以上版本浏览器。

由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-css/6502.html