一个关于表格边框的有关问题！紧急
日期：2014-05-17 浏览次数：20892 次
一个关于表格边框的问题！紧急求救！
我设置了一个单元格的背景色。
显示出来是一个四四方方的红色的表格。
但是我想要的效果是显示出来的是圆角矩形。就是说四个角要有点弧度的，请问如何设定？
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<style type= "text/css ">
div#nifty{margin: 0 10%;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 id= "nifty ">
<b class= "rtop "> <b class= "r1 "> </b> <b class= "r2 "> </b> <b class= "r3 "> </b> <b class= "r4 "> </b> </b>
<h1> Nifty Corners </h1>
<p> Auiiui uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui. </p>
<h2> Rounded corners without images </h2>
<p> Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o. </p>
<b class= "rbottom "> <b class= "r4 "> </b> <b class= "r3 "> </b> <b class= "r2 "> </b> <b class= "r1 "> </b> </b>
</div>
</html>
------解决方案--------------------
<html>
<head>
<title> css圆角效果--七度空间网页教学网 </title>
<meta http-equiv= "content-type " content= "text/html; charset=gb2312 ">
<style type= "text/css ">
div.RoundedCorner{display:inline;background: #9BD1FA;width:200px;text-align:center}
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>
------解决方案--------------------
http://blog.csdn.net/uno
我写过一篇，只用HTML+CSS，不需要图片
技术是从gtalk的样式列表里偷出来的:P
我设置了一个单元格的背景色。
显示出来是一个四四方方的红色的表格。
但是我想要的效果是显示出来的是圆角矩形。就是说四个角要有点弧度的，请问如何设定？
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<style type= "text/css ">
div#nifty{margin: 0 10%;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 id= "nifty ">
<b class= "rtop "> <b class= "r1 "> </b> <b class= "r2 "> </b> <b class= "r3 "> </b> <b class= "r4 "> </b> </b>
<h1> Nifty Corners </h1>
<p> Auiiui uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui. </p>
<h2> Rounded corners without images </h2>
<p> Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o. </p>
<b class= "rbottom "> <b class= "r4 "> </b> <b class= "r3 "> </b> <b class= "r2 "> </b> <b class= "r1 "> </b> </b>
</div>
</html>
------解决方案--------------------
<html>
<head>
<title> css圆角效果--七度空间网页教学网 </title>
<meta http-equiv= "content-type " content= "text/html; charset=gb2312 ">
<style type= "text/css ">
div.RoundedCorner{display:inline;background: #9BD1FA;width:200px;text-align:center}
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>
------解决方案--------------------
http://blog.csdn.net/uno
我写过一篇，只用HTML+CSS，不需要图片
技术是从gtalk的样式列表里偷出来的:P
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
