一般来说，基于CSS的圆角技术分为带图片和不带图片两大类。在这当中，又有使用JavaScript的和不使用JavaScript的之分。所以也是各有千秋，互有利弊。还有就是，处理出来的圆角有的是有锯齿的，甚至还有人就利用锯齿来做圆角，于是就有人挑战要做成无锯齿的圆角。总之，新技术在不断出现，新战友挑战老战友，仅仅这个CSS圆角技术就够热闹了。
使用图片的圆角一般结构相对简单，而不使用图片的则经常是层层相套的div。在页面使用JavaScript有时候也不是那么讨人喜欢。所以，我希望能找到一个不用图片，不用JavaScript，并且结构简单的方法，如果可能的话，消除锯齿最好(废话!)。
网页特效代码，用纯CSS样式实现的网页中圆角矩形代码
<style type="text/css">
.spiffy{
display:block;
}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
background:#0a67e6;
}
.spiffy1{
border-right:1px solid #95bdf4;
padding-right:1px;
margin-right:3px;
border-left:1px solid #95bdf4;
padding-left:1px;
margin-left:3px;
background:#478dec;
}
.spiffy2{
border-right:1px solid #e6effc;
border-left:1px solid #e6effc;
padding:0px 1px;
background:#3883ea;
margin:0px 1px;
}
.spiffy3{
border-right:1px solid #3883ea;
border-left:1px solid #3883ea;
margin:0px 1px;
}
.spiffy4{
border-right:1px solid #95bdf4;
border-left:1px solid #95bdf4;
}
.spiffy5{
border-right:1px solid #478dec;
border-left:1px solid #478dec;
}
.spiffy_content{
padding:0px 5px;
background:#0a67e6;
}
</style>
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b>
<div class="spiffy_content">
<!-- 在这里填入文本内容 -->
本站提供网页制作教程，动态网页教程，建站指南，Flash动画，视频教程，网页特效，网页素材等
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b>
</b>
</div>