DIV+CSS圆角效果轻松实现

本节向大家介绍一下DIV+CSS圆角的简单实现方法，即使用图片做背景的DIV+CSS圆角实现方案。一张图片利用CSS定位，实现DIV的四个边角都是圆角。这样的好处是，只需要一张圆形的图片，就可以实现四个圆角了。

我们一直强调网站建设、成都网站设计对于企业的重要性,如果您也觉得重要,那么就需要我们慎重对待,选择一个安全靠谱的网站建设公司,企业网站我们建议是要么不做，要么就做好,让网站能真正成为企业发展过程中的有力推手。专业网络公司不一定是大公司,成都创新互联公司作为专业的网络公司选择我们就是放心。

DIV+CSS圆角的简单实现方法

做网站设计的时候，免不了和DIV+CSS打交道，而DIV+CSS圆角则是网站设计必经的一课。比较了网络上众多的DIV+CSS圆角实现的方案，包括不用图片纯CSS实现圆角的许多方案，结果是不用图片的DIV+CSS圆角无一例外，都使用了大量的冗余无意义的css代码，而且在IE、Firefox、chrome等多浏览器下的兼容性不容乐观。

总结一下，建议大家还是使用图片做背景的DIV+CSS圆角实现方案。一张图片利用CSS定位，实现DIV的四个边角都是圆角。这样的好处是，只需要一张圆形的图片，就可以实现四个圆角了。

HTML代码：

这里是主体内容....

.nav{
position:relative;
width:500px;
margin:0pxauto;
background:#eeeeee;
}
.nav2{
border:1pxsolid#dddddd;
padding:4px0px2px0px;
height:42px;
text-align:center;
}
/*DIV+CSS圆角处理*/
.nav.leftTop{/*DIV+CSS圆角左上角*/
background:url(images/wbb.gif)no-repeatlefttop;
width:10px;
height:10px;
position:absolute;
left:0;
top:0;
}
.nav.rightTop{/*DIV+CSS圆角右上角*/
background:url(images/wbb.gif)no-repeatrighttop;
width:10px;
height:10px;
position:absolute;
right:0;
top:0;
}
.nav.leftBottom{/*DIV+CSS圆角左下角*/
background:url(images/wbb.gif)no-repeatleftbottom;
width:10px;
height:10px;
position:absolute;
left:0;
bottom:0;
}
.nav.rightBottom{/*DIV+CSS圆角右下角*/
background:url(images/wbb.gif)no-repeatrightbottom;
width:10px;
height:10px;
position:absolute;
right:0;
bottom:0;
}
/*DIV+CSS圆角处理end*/

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联