首先圆角是网页中常用的美化效果，当然实现圆角的方式也很多，在项目中我们为了效率往往是采用背景图的方式去实现圆角的效果，图片基本上是采用css sprites方式合并的图，当然有其自身的缺点，执行效率低下，不便于以后的维护，出于对页面样式灵活性的考虑，可以通过纯css无图片的形式来处理这些效果。
本文章为原创文章，转载请注明出处:
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 >
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 ; }
/*圆角边框颜色*/
.border_color1 { 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 ; }
Div样式
.mi_center { width : 400px ; padding : 0 0 0 8px ; }
样式实现图：
当然这个圆角的实现非常灵活，可以按照自己的需要将其绚丽。
qq:313247313 Email:rafx.z@hotmail.com 新浪微博: