纯CSS打造支持IE6的无图片圆角教程_Div+Css_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

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

来源：未知作者：类型：图文教程点击次数：发布时间：2014-03-28 09:27:05

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

<html> <head> <title>css圆角效果--七度空间网页教学网</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style type="text/css"> div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} </style> </head> <body> <div class="RoundedCorner"> 无图片实现圆角框 </div> </body> </html>
提示：您可以先修改部分代码再运行

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