在网页设计中，为了好看常常将方角的矩形做成圆角的。通常的做法是将矩形的上下各做成一个圆角的背景图片，这里介绍一个用CSS实现圆角效果的方法：
源代码如下：（test.html)
复制内容到剪贴板
代码:
<html>
<head>
<title>div+CSS圆角矩形</title>
<style type="text/css">
body{
padding: 20px;
background-color: #FFF;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif
}
div#nifty{
margin: 0 10%;
background: #9BD1FA
}
p {padding:10px}
div.rtop, div.rbottom{
display:block;
background: #FFF
}
div.rtop div, div.rbottom div{
display:block;
height: 1px;
overflow: hidden;
background: #9BD1FA
}
div.r1{margin: 0 5px}
div.r2{margin: 0 3px}
div.r3{margin: 0 2px}
div.rtop div.r4, div.rbottom div.r4{
margin: 0 1px;
height: 2px
}
</style>
</head>
<body>
<div id="nifty">
<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
<p>这是用CSS实现的圆角效果</p>
<div class="rtop"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>
</body>
</hmtl> 简单吧，它只是是控制DIV的边距margin的大小实现的，用四个DIV叠在一起，选择不同的类（r1,r2,r3,r4），由于这四个类的margin值大小是不一样的，看起来就好像一个圆角了。底部的圆角刚好相反（r4,r3,r2,r1）最大的边距放在最底，学过微分的同学应该都明白，如果想看下效果不妨把上面代码另存为：test.html试一下吧~~~其实那<div>改为<b>标签也是可以的，呵呵~~
