html+css做圓角表格
方法一
閱讀程式碼編輯程式碼執行效果複製HTML程式碼儲存程式碼<html><head>
<title>css圓角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head><body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
</b></b><br>
無圖片實現圓角框<br>
<br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
</b></b>
</div>
</body></html><html><head>
<title>css圓角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head><body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
</b></b><br>
無圖片實現圓角框<br>
<br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
</b></b>
</div>
</body></html>
方法二
閱讀程式碼編輯程式碼執行效果複製HTML程式碼儲存程式碼<table style="table-layout: fixed" height="28" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="3" width="100%">
<td>
<table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="1">
<td width="1"></td>
<td width="1"></td>
<td width="1"></td>
<td bgcolor="#908a47"></td>
<td width="1"></td>
<td width="1"></td>
<td width="1"></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47" colspan="2"></td>
<td bgcolor="#f7f8f9"></td>
<td bgcolor="#908a47" colspan="2"></td>
<td></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47"></td>
<td bgcolor="#f7f8f9" colspan="3"></td>
<td bgcolor="#908a47"></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr><tr>
<td>
<table style="table-layout: fixed" height="100%" cellspacing="0" cellpadding="0"
border="0">
<tbody>
<tr>
<td width="1" bgcolor="#908a47"></td>
<td id="oINNER" bgcolor="#f7f8f9"> </td>
<td width="1" bgcolor="#908a47"></td>
</tr>
</tbody>
</table>
</td>
</tr><tr height="3" width="100%">
<td>
<table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="1">
<td width="1"></td>
<td width="1" bgcolor="#908a47"></td>
<td width="1" bgcolor="#f7f8f9"></td>
<td bgcolor="#f7f8f9"></td>
<td width="1" bgcolor="#f7f8f9"></td>
<td width="1" bgcolor="#908a47"></td>
<td width="1"></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47" colspan="2"></td>
<td bgcolor="#f7f8f9"></td>
<td bgcolor="#908a47" colspan="2"></td>
<td></td>
</tr><tr height="1">
<td colspan="3"></td>
<td bgcolor="#908a47"></td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><table style="table-layout: fixed" height="28" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="3" width="100%">
<td>
<table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="1">
<td width="1"></td>
<td width="1"></td>
<td width="1"></td>
<td bgcolor="#908a47"></td>
<td width="1"></td>
<td width="1"></td>
<td width="1"></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47" colspan="2"></td>
<td bgcolor="#f7f8f9"></td>
<td bgcolor="#908a47" colspan="2"></td>
<td></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47"></td>
<td bgcolor="#f7f8f9" colspan="3"></td>
<td bgcolor="#908a47"></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr><tr>
<td>
<table style="table-layout: fixed" height="100%" cellspacing="0" cellpadding="0"
border="0">
<tbody>
<tr>
<td width="1" bgcolor="#908a47"></td>
<td id="oINNER" bgcolor="#f7f8f9"> </td>
<td width="1" bgcolor="#908a47"></td>
</tr>
</tbody>
</table>
</td>
</tr><tr height="3" width="100%">
<td>
<table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="1">
<td width="1"></td>
<td width="1" bgcolor="#908a47"></td>
<td width="1" bgcolor="#f7f8f9"></td>
<td bgcolor="#f7f8f9"></td>
<td width="1" bgcolor="#f7f8f9"></td>
<td width="1" bgcolor="#908a47"></td>
<td width="1"></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47" colspan="2"></td>
<td bgcolor="#f7f8f9"></td>
<td bgcolor="#908a47" colspan="2"></td>
<td></td>
</tr><tr height="1">
<td colspan="3"></td>
<td bgcolor="#908a47"></td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
方法三
閱讀程式碼編輯程式碼執行效果複製HTML程式碼儲存程式碼<html xmlns:v><head>
<style>
v/:* {behavior: url(#default#VML);}
</style>
</head><body>
<v:roundrect style="position: relative; width: 200; height: 100px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px" />
<v:textbox style="font-size: 12px">css實現真正的圓角表格</v:textbox>
</v:roundrect>
</body></html><html xmlns:v><head>
<style>
v/:* {behavior: url(#default#VML);}
</style>
</head><body>
<v:roundrect style="position: relative; width: 200; height: 100px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px" />
<v:textbox style="font-size: 12px">css實現真正的圓角表格</v:textbox>
</v:roundrect>
</body></html>
方法四
閱讀程式碼編輯程式碼執行效果複製HTML程式碼儲存程式碼<html>
<style type="text/css">
.rd{font-family: "宋體";font-size: 14px;height: 12px;width: 12px;margin: 0px;padding: 0px;line-height: 12px;}
#l{filter:DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0);}
#r{filter:DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0);}
.tb{filter:DropShadow(Color=#cccccc,OffX=3,OffY=3);}#cn{font-family:"宋體";font-size: 14px;line-height:24px;}#en{font-family:"Verdana";font-size: 11px;}#ct{filter:DropShadow(Color=#ffffff,OffX=-1,OffY=-1)DropShadow(Color=#6699cc,OffX=1,OffY=1);position:relative;height:40px;}body{overflow:hidden;background:#eeeeee;}
</style>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tb">
<tr>
<td class="rd" id="l">╭</td>
<td valign="bottom">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000" height="1"></td>
</tr><tr>
<td bgcolor="#00CCFF" height="7"></td>
</tr>
</table>
</td>
<td class="rd" id="r">╮</td>
</tr><tr>
<td align="right">
<table height="52" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1" bgcolor="#000000"></td>
<td bgcolor="#00CCFF" width="7"></td>
</tr>
</table>
</td>
<td bgcolor="#00CCFF" valign="top">
<div id="ct">
<label id="en">Fight for the cause of world peace!</label><br />
<label id="Label1">The importance of a proper diet in maintaining health should not
be disregarded.</label><br />
<label id="cn">歡迎進入我們的網站，http://www.cc0773.com/</label>
<label id="Label2">。</label>
</div>
</td>
<td align="left">
<table height="52" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#00CCFF" width="6"></td>
<td width="1" bgcolor="#000000"></td>
</tr>
</table>
</td>
</tr><tr>
<td class="rd" id="Td1">╰</td>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#00CCFF" height="5"></td>
</tr><tr>
<td bgcolor="#000000" height="1"></td>
</tr>
</table>
</td>
<td class="rd" id="Td2">╯</td>
</tr>
</table>
</body></html>