在ff下构建圆角时,用这样的一行代码就ok了。.bor{ -moz-border-radius:5px;}但是在ie或者是chrome中,这个样式是无效的。
无意中看到这样这一种构建圆角的方式了。效果如下。
html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
div.RoundedCorner{background:#CC0000; width:390px;}
/* 圆角样式 */
b.rtop, b.rbottom{display:block;background: #FFFFFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background:#CC0000}
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}
.myimg{ filter:alpha(opacity=120);}
</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>
<div style="margin:10px;">
<table width="370" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="46" rowspan="2" align="center" valign="middle" bgcolor="#CC0000"><img src="" /></td>
<td width="318" bgcolor="#CC0000"><font style="font-size:20px; color:#FFF; font-weight:bold;">中国营销渠道创新运营商</font></td>
</tr>
<tr>
<td bgcolor="#CC0000"><font style="font-size:20px; color: #FFF; font-weight:bold;">城市社区综合服务提供商</font></td>
</tr>
</table>
</div>
</div>
</body>
</html>
同理如果想圆角弧度再大一点,那么r1的margin则就要大一点。同时要多加上几个 <b class="r6"></b> 然后定义对应样式.r6{ margin:0 2;}这样一行一行的排下来。直到最底下的<b>的样式是margin: 0 1px;