css构建圆角

/ 0评 / 1

在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;

发表评论

您的电子邮箱地址不会被公开。

*