首先圆角是网页中常用的美化效果，当然实现圆角的方式也很多，在项目中我们为了效率往往是采用背景图的方式去实现圆角的效果，图片基本上是采用css sprites方式合并的图，当然有其自身的缺点，执行效率低下，不便于以后的维护，出于对页面样式灵活性的考虑，可以通过纯css无图片的形式来处理这些效果。
本文章为原创文章，转载请注明出处:http://www.cnblogs.com/rafx/
Css圆角的实现原理：
圆角框其实就是各种样式来控制div的大小来实现视觉上的优美弧形
Html结构：
其中rnd代表圆角的样式，border_color代表圆角边框颜色 background_colord代表背景色
<div class="mi_left left">
<b class="rnd_modboxin">
<b class="rnd1 border_color1 background_color2"></b>
<b class="rnd2 border_color1 background_color3"></b>
<b class="rnd3 border_color1 background_color3"></b>
</b>
<div class="rnd_mid border_color5">
hello,kitty
</div>
<b class="rnd_modboxin">
<b class="rnd3 border_color1 background_color3"></b>
<b class="rnd2 border_color1 background_color3"></b>
<b class="rnd1 border_color1 background_color2"></b>
</b>
</div>
<b class="rnd_modboxin">
<b class="rnd1 border_color1 background_color2"></b>
<b class="rnd2 border_color1 background_color3"></b>
<b class="rnd3 border_color1 background_color3"></b>
</b>
<div class="rnd_mid border_color5">
hello,kitty
</div>
<b class="rnd_modboxin">
<b class="rnd3 border_color1 background_color3"></b>
<b class="rnd2 border_color1 background_color3"></b>
<b class="rnd1 border_color1 background_color2"></b>
</b>
</div>
Css样式表：
/*圆角边框样式*/
.rnd3,.rnd2,.rnd1 {
overflow: hidden;
border-style: solid;
border-width: 0;
display: block;
font-size: 1px;
height: 1px;
line-height: 1px;
text-align: left;
}
.rnd3 {
border-width: 0 1px;
height: 2px;
margin: 0 1px;
}
.rnd2 {
border-width: 0 2px;
margin: 0 2px;
}
.rnd1 {
margin: 0 4px;
}
.rnd_mid {
border-style: solid;
border-width: 0 1px;
}
overflow: hidden;
border-style: solid;
border-width: 0;
display: block;
font-size: 1px;
height: 1px;
line-height: 1px;
text-align: left;
}
.rnd3 {
border-width: 0 1px;
height: 2px;
margin: 0 1px;
}
.rnd2 {
border-width: 0 2px;
margin: 0 2px;
}
.rnd1 {
margin: 0 4px;
}
.rnd_mid {
border-style: solid;
border-width: 0 1px;
}
/*圆角边框颜色*/
.border_color1 {
border-color: #dadada;
}
.border_color2 {
border-color: #0E5CA5;
}
.border_color3 {
border-color: #73B4EC;
}
border-color: #dadada;
}
.border_color2 {
border-color: #0E5CA5;
}
.border_color3 {
border-color: #73B4EC;
}
/*背景color*/
.background_color0 {
background: none repeat scroll 0 50% #fafafa;
}
.background_color1 {
background: none repeat scroll 0 50% #f7f7f7;
}
.background_color3 {
background: none repeat scroll 0 50% #ffffff;
}
.background_color4 {
background: none repeat scroll 0 50% #fbfbfb;
}
.background_color5 {
background: none repeat scroll 0 50% #1181E0;
}
.background_color2 {
background: none repeat scroll 0 50% #dadada;
}
.background_color6 {
background: none repeat scroll 0 50% #0E5CA5;
}
.background_color7 {
background: none repeat scroll 0 50% #73B4EC;
}
background: none repeat scroll 0 50% #fafafa;
}
.background_color1 {
background: none repeat scroll 0 50% #f7f7f7;
}
.background_color3 {
background: none repeat scroll 0 50% #ffffff;
}
.background_color4 {
background: none repeat scroll 0 50% #fbfbfb;
}
.background_color5 {
background: none repeat scroll 0 50% #1181E0;
}
.background_color2 {
background: none repeat scroll 0 50% #dadada;
}
.background_color6 {
background: none repeat scroll 0 50% #0E5CA5;
}
.background_color7 {
background: none repeat scroll 0 50% #73B4EC;
}
Div样式
.mi_center {
width: 400px;
padding: 0 0 0 8px;
}
width: 400px;
padding: 0 0 0 8px;
}
样式实现图：
当然这个圆角的实现非常灵活，可以按照自己的需要将其绚丽。