当前位置:首页 > 设计在线 > 网页设计 > CSS/Xhtml > 几种圆角布局效果的实现和比较

几种圆角布局效果的实现和比较

点击次数:28 次 发布日期:2008-11-26 22:59:49 作者:源代码网
源代码网推荐

源代码网整理以下针对几种圆角布局的方法,我用图片做了一个示意图以说明原理,点击图片可以连接到演示页面,看到【CSS无图版圆角布局】和【CSS图片版圆角布局】的效果,需要相应代码的朋友可以利用浏览器“查看源代码”的功能来找到代码。

源代码网整理以下 

源代码网整理以下 

源代码网整理以下上图对照着我给出的实例代码就能够比较清晰的看出几种圆角布局的表现思路了。

源代码网整理以下下面对比一下几种方法的优缺点:

源代码网整理以下传统的表格式布局使用起来比较简单,但不推荐,因为其代码冗余多,不符合标准,偶尔还容易出现错位等控制不精确的现象。

源代码网整理以下无图版的CSS圆角布局在圆角背景透明方面比较自由,可以适应背景色未知或者背景颜色为图片的情况,代码重复利用率最高,但是因为对DIV的控制精确到像素,会出现锯齿。

源代码网整理以下有图版的CSS圆角布局在样式自由度上较高,可以利用图片消去锯齿。但是若想要支持透明图片实现在任意背景下效果都比较完美,则需要增加一些琐碎的DIV来进行特殊处理。

源代码网整理以下相比较而言,我喜欢有图版的CSS圆角布局方法。至于你要怎么选择,就看你的需求了。除了以上常用的这几种方法之外,还有很多方法能够达到圆角的效果,欢迎大家留言讨论。


源代码网供稿.
网友评论 (0)
会员中心
设计在线
本站推荐
设计在线之精华