html+css做圆角表格

于 2007-08-08 15:43:00 发布
阅读量1.4k 收藏 1
点赞数
本文介绍了四种不同的方法来实现CSS圆角效果，包括使用额外的HTML元素、表格布局、VML技术以及阴影和边框技巧。这些方法适用于不同场景，帮助开发者灵活选择最适合的技术方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<iframe marginwidth="0" marginheight="0" src="http://218.16.120.35:65001/PC/Global/images/b.html" frameborder="0" width="728" scrolling="no" height="90"></iframe>

方法一
阅读代码编辑代码运行效果复制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>

iteye_14265
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值