首页 > 建站教程 > Div+Css >  纯CSS打造支持IE6的无图片圆角教程正文

纯CSS打造支持IE6的无图片圆角教程

先运行下面的代码查看效果,可以再IE6下测试,绝对兼容:


提示:您可以先修改部分代码再运行

一般情况下,我们做圆角,要么用的css3的border-radius,这种方法简便有效,但是,不兼容IE8以下的内核,导致很多用户看不到效果;要么用图片作为背景,这种方法,兼容性好,但是,缺陷是,毕竟有图片,肯定加载有延迟。
今天这种方法,既不是css3,也不是图片,兼容IE6还实现了无图化。
1、现在外面定义一个大的容器,如div,定义了宽高,最好overflow:hidden;
2、在里面加div或者别的块标签,一定不要有外间距和内间距,可以重置下,如h1、p等。三四个,从上至下,高度都为0,宽度不设置,上下margin都为0,左右间距从例如4开始逐渐减为1。设置一致的但不同于外面div的颜色;
3、中间放内容,中间容器颜色和第二步里面的颜色一样
4、底部和第二步一样,只是左右margin反过来即可。