PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> CSS >> 

7种CSS圆角框解决方案

7种CSS圆角框解决方案

来源:互联网  作者:  发布时间:2010-03-02
本文探讨的是前端设计种最常用的页面圆角框效果的7种不同方法实

7,无图片vml/canvas结合的圆角框

增补一种方案,结合jquery/vml/canvas的无图片圆角框。


图七

特点:

1.不用任何图形。

2.兼容性:通杀所有浏览器

3.圆角半径随意调整,并且四个角可以随意设置要不要圆角。

4.重用性强:多个圆角任意调用。

5.颜色随意设置,并且可以使用复杂的图片做为背景,表现丰富。

6.结构无冗余,只需要在容器上定义一个class或ID就可以了。

7.圆角平滑。

缺点:

1.本圆角需要用到jquery库,和一个JS文件,如果在您的项目中已经用到了Jquery这个库,倒还可以用得上,不然,为一个圆角加载一两个JS文件有点得不偿失。

2.圆角在不同的浏览器下显示有点小小的问题.

实例演示:http://labs.parkerfox.co.uk/cornerz/

打包下载:下载demo

结语:目前的css因为不能为一个容器中定义多张背景图片,造成了为了这种圆角效果而加入冗余标签。听说CSS3会引入这一属性,可能到哪时,就是圆角框统一的时候了。另外也听说在CSS3中有意向加入像FF3私有属性(-moz-border-radius)的方法,这也可以完美地解决这个问题。但在目前的情势下,可能也只有用上面的这些方法来过渡了,强烈期待CSS3的到来。

总而言之:要实现绝对的完美圆角框在目前的形势下基本上是不可能的,所以取名为“半完美解决方案”。


延伸阅读:
百度有啊商城CSS+XHTML实现的圆角
css实现圆角图片
CSS圆角在CSS2和CSS3里的实现方法
Tags: css3   方案   解决   圆角   css   C  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号