DIV CSS圆角效果轻松实现_程序开发

DIV CSS圆角效果轻松实现

创始人

2024-07-13 20:41:39

0次

本节向大家介绍一下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代码：

这里是主体内容....

CSS代码：

.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*/

【编辑推荐】

DIV CSS网页布局时合理架构CSS
技术分享如何实现CSS横向导航
技术分享 DIV CSS网站布局八大窍门
DIV CSS中id与class使用用原则与技巧
鼠标经过时改变DIV背景颜色的三种途径

上一篇：浅析各类DDOS防火墙应对攻击时的表现

下一篇：哪些问题导致Wi-Fi无线连接失败

DIV CSS圆角效果轻松实现

相关内容

热门资讯