100分求无图片圆角表格解决思路
日期：2014-05-16 浏览次数：20441 次
100分求无图片圆角表格
网上搜了一下，都不符合要求，要不就是用图片实现，要不就不是真正的圆角，只是把圆角的部分用白色遮盖，当背景不是白色的时候就彻底露馅了。不知哪位大侠能弄出一个真正的圆角表格？
------解决方案--------------------
<html>
<head>
<title> 100分求无图片圆角表格 </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> 100分求无图片圆角表格 <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>
------解决方案--------------------
借用楼上的代码, 做了点修改, 解决底色的问题。没装FF, 不知道FF下能不能正常用。
<html>
<head>
<title> 无图片圆角表格 </title>
<meta http-equiv= "content-type " content= "text/html; charset=gb2312 ">
<style type= "text/css ">
.RoundedCorner{background-color: #9BD1FA}
b.rtop, b.rbottom{display:block;background-color:transparent}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background-color: #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 style= "background-color:#000000 ">
<table width=80% border= "0 " cellpadding= "0 " cellspacing= "0 " align= "center ">
<tr> <td> <b class= "rtop "> <b class= "r1 "> </b> <b class= "r2 "> </b> <b class= "r3 "> </b> <b class= "r4 "> </b> </b> </td> </tr>
<tr>
<td class= "RoundedCorner ">
</td>
</tr>
<tr> <td> <b class= "rbottom "> <b class= "r4 "> </b> <b class= "r3 "> </b> <b class= "r2 "> </b> <b class= "r1 "> </b> </b> </td> </tr>
</table>
</body>
</html>
------解决方案--------------------
<style type= "text/css ">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#b20000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #870000;
border-right:1px solid #870000;
background:#9f0000}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #6f0000;
border-right:1px so
网上搜了一下，都不符合要求，要不就是用图片实现，要不就不是真正的圆角，只是把圆角的部分用白色遮盖，当背景不是白色的时候就彻底露馅了。不知哪位大侠能弄出一个真正的圆角表格？
------解决方案--------------------
<html>
<head>
<title> 100分求无图片圆角表格 </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> 100分求无图片圆角表格 <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>
------解决方案--------------------
借用楼上的代码, 做了点修改, 解决底色的问题。没装FF, 不知道FF下能不能正常用。
<html>
<head>
<title> 无图片圆角表格 </title>
<meta http-equiv= "content-type " content= "text/html; charset=gb2312 ">
<style type= "text/css ">
.RoundedCorner{background-color: #9BD1FA}
b.rtop, b.rbottom{display:block;background-color:transparent}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background-color: #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 style= "background-color:#000000 ">
<table width=80% border= "0 " cellpadding= "0 " cellspacing= "0 " align= "center ">
<tr> <td> <b class= "rtop "> <b class= "r1 "> </b> <b class= "r2 "> </b> <b class= "r3 "> </b> <b class= "r4 "> </b> </b> </td> </tr>
<tr>
<td class= "RoundedCorner ">
</td>
</tr>
<tr> <td> <b class= "rbottom "> <b class= "r4 "> </b> <b class= "r3 "> </b> <b class= "r2 "> </b> <b class= "r1 "> </b> </b> </td> </tr>
</table>
</body>
</html>
------解决方案--------------------
<style type= "text/css ">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#b20000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #870000;
border-right:1px solid #870000;
background:#9f0000}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #6f0000;
border-right:1px so
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
