飘易博客(作者:Flymorn)
订阅《飘易博客》RSS,第一时间查看最新文章!
飘易首页 | 留言本 | 关于我 | 订阅Feed

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

Author:flymorn Source:Flymorn
Categories:网站设计 PostTime:2010-4-22 18:58:42
正 文:
    做网站设计的时候,免不了和DIV+CSS打交道,而CSS圆角则是网站设计必经的一课。飘易比较了网络上众多的CSS圆角实现的方案,包括不用图片纯CSS实现圆角的许多方案,结果是不用图片的CSS圆角无一例外,都使用了大量的冗余无意义的css代码,而且在IE、Firefox、chrome等多浏览器下的兼容性不容乐观。

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

    HTML代码:
<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的图片而已。
DIV+CSS圆角的简单实现方法(图)

DIV+CSS圆角的简单实现方法(图)
作者:flymorn
来源:Flymorn
版权所有。转载时必须以链接形式注明作者和原始出处及本声明。
上一篇:解决Firefox不支持Js的InnerHtml问题
下一篇:百度关键字排名查询工具(2010年4月21日版)
11条评论 “DIV+CSS圆角的简单实现方法(图)”
2010-4-24 9:40:57
以前见过,没有实际使用过
2010-4-26 18:58:17
中国人做到网站很有一个特点是 乱呀
2010-5-4 16:51:57
恋爱中,干傻事总是让人感到十分美妙。
2010-5-4 16:53:37
什么也瞒不过恋人的眼睛
5 dju
2010-5-4 16:54:24
爱所祈求的唯一礼物就是爱
2010-5-4 16:54:52
真挚恋爱过的心永不忘却。
2010-5-4 16:57:25
爱情的炽热胜过千万团的火。
2010-5-10 19:08:09
这方法不错呀,兼容性很好
2010-6-29 9:46:24
ie6下面好像不好使呢,是哪个css属性的bug呢?
2011-8-22 8:41:39
细节还是用图片比较好
11 smallbird
2012-6-8 11:51:31
怎么在chrome 里出不来效果呢?我是初学,四角分别却了一口。
发表评论
名称(*必填)
邮件(选填)
网站(选填)

记住我,下次回复时不用重新输入个人信息
© 2007-2010 飘易博客 Www.Piaoyi.Org 原创文章版权由飘易所有 渝ICP备07006361号