原来用CSS可以设置圆角的方块。
究其原理，是用3条长度不同的直线（或更多）叠在一起，模拟出这个弯曲的圆角，正如多边形可以组成圆形一样，只要边够多，就可以无限逼近一个圆。
===============================================================
附网上找到的示例
<html>
<head>
<title> 用CSS做圆角方块</title>
<style type="text/css">
.roundBorder
{
display: block;
}
.roundBorder *
{
background: white;
display: block;
height: 1px;
overflow: hidden;
}
.roundBorderLayer1
{
border-left: 1px solid #C4C4C4;
border-right: 1px solid #C4C4C4;
margin: 0px 1px;
}
.roundBorderLayer2
{
border-left: 1px solid #D3D4D5;
border-right: 1px solid #D3D4D5;
margin: 0px 2px;
padding: 0px;
}
.roundBorderLayer3
{
background: #C4C4C4;
border-left: 1px solid #D3D4D5;
border-right: 1px solid #D3D4D5;
margin: 0px 3px;
}
.roundContent
{
background:white;
border-left: 1px solid #C4C4C4;
border-right: 1px solid #C4C4C4;
overflow: hidden;
padding: 4px 10px;
}
</style>
</head>
<body>
<b class="roundBorder">
<b class="roundBorderLayer3"></b>
<b class="roundBorderLayer2"></b>
<b class="roundBorderLayer1"></b>
</b>
<div class="roundContent">
Hello!!
<br/>
用CSS做圆角方块
<br/>
真的很简单
</div>
<b class="roundBorder">
<b class="roundBorderLayer1"></b>
<b class="roundBorderLayer2"></b>
<b class="roundBorderLayer3"></b>
</b>
</body>
</html>
