[免费注册]
  • 腾讯QQ
  • 人人网
  • 新浪微博
  • 腾讯微博
BUG反馈 | 广告合作 | 网页游戏 | 帮助中心
站内公告:
首页 解决方案 基础语法 HTML前端 DIV+CSS圆角的简单实现方法(图)

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

分享到:
dsfsdf 离线 时间: 2011-03-17 16:03 阅读(270) 评论(0)
正 文:做网站设计的时候,免不了和DIV+CSS打交道,而CSS圆角则是网站设计必经的一课。飘易比 较了网络上众多的CSS圆角实现的方案,包括不用图片纯CSS实现圆角的许多方案,结果是不用图片的CSS圆角无一例外,都使用了大量的冗余无意义的 css代码,而且在IE、Firefox、chrome等多浏览器下的兼容性不容乐观。    总结一下,飘易建议大家还是使用图片做背景的CSS圆角实 现方案。一张图片利用CSS定位,实现DIV的四个边角都是圆角。这样的好处是,只需要一张圆形的图片,就可以实现四个圆角了。
<div class="nav">
<div class="nav2">
<SPAN class=leftTop></SPAN>
<SPAN class=rightTop></SPAN>

这里是主体内容....

<SPAN class=leftBottom></SPAN>
<SPAN class=rightBottom></SPAN>
</div>
</div>

 CSS代码:
.nav{
position:relative;
width:500px;
margin:0px auto;
background:#eeeeee;
}
.nav2{
border:1px solid #dddddd;
padding: 4px 0px 2px 0px;
height:42px;
text-align:center;
}

/*css圆角处理*/
.nav .leftTop{/*css圆角左上角*/
background:url(images/wbb.gif) no-repeat left top;
width:10px;
height:10px;
position:absolute;
left:0;
top:0;
}
.nav .rightTop{/*css圆角右上角*/
background:url(images/wbb.gif) no-repeat right top;
width:10px;
height:10px;
position:absolute;
right:0;
top:0;
}
.nav .leftBottom{/*css圆角左下角*/
background:url(images/wbb.gif) no-repeat left bottom;
width:10px;
height:10px;
position:absolute;
left:0;
bottom:0;
}
.nav .rightBottom{/*css圆角右下角*/
background:url(images/wbb.gif) no-repeat right bottom;
width:10px;
height:10px;
position:absolute;
right:0;
bottom:0;
}
/*css圆角处理end*/

你所要做的就是准备一张画有圆的wbb.gif的图片而已。

网友评论: 共有0条评论

我来评论

guest

登录 (请登录发言,并遵守相关规定
小提示:
• 运行html请点击源码添加
• 添加完毕后加上<br />
• 显示html直接复制黏贴
• 高亮代码请点击插入代码

小贴士:

1. 请各位网友在回复的时候不为了回复而回复,尽量发一些有质量的回复内容。

2. 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。

3. 请勿到处挖坑绊人、招贴广告。即占空间让人厌烦,又没人会搭理,于人于己都无利。如果您发现自己的回复不见了,请参考以上3条。

设为首页 | 加入收藏 | 关于我们 | 著作权声明 | 合作信息 | 麦琪开源PHP框架 IT-知识库 Copyright 2010 - 2011 ITZSK Corporation,ALL Rights Reserved. 版权所有
内存使用:1,269.90KB 执行速度:0.02007seconds