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

7种CSS圆角框解决方案

7种CSS圆角框解决方案

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

3,图片圆角框

收录理由:兼容性强,可以表现很复杂的圆角效果。


图三

特点:

1.使用四个圆角图形(或一个圆图片)。

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

3.这是最常用的圆角框做法。

4.因为采用图片来表现,所以其圆角是超级平滑,无任何锯齿现象。

5.表现丰富,适用于各种对图片表现要求较高的圆角框。

缺点:

1.构造这个圆角也需要加入四个标签来装四张角图片,结构也有冗余。

2.重用性不强:如果一个页面有多个圆角,并且要实现不同的半径大小,则要重新制作一套圆角图片。

3.如果对结构的冗余没有特别的需求,这就是超级圆滑圆角框的解决方案了。

实现原理:

利用九宫格原理,在一个容器的四个角加入绝对定位(或相对定位)的四张圆角图片。


延伸阅读:
百度有啊商城CSS+XHTML实现的圆角
css实现圆角图片
CSS圆角在CSS2和CSS3里的实现方法

Tags: css3   方案   解决   圆角   css   C  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号