制作兼容IE的圆角DIV容器及原理

作者：秋了秋发表时间：2015年04月11日

提到圆角，很多人都会想到CSS的border-radius，但是CSS的border-radius属性在IE下是无效的，无论你的border-radius为几，在IE下通通都是border-radius:0;也就是说圆的会全部变成矩形的，如何制作一个兼容IE的圆角正是这篇文章所要讲述的，不仅要教会你怎么做，更要让你知道它的原理。首先先看一下兼容圆角的效果：

秋叶网络博客

netblog.cn

这个可不是图片来的哦，这是纯html+css做成的div容器。即使你用老掉牙的IE6访问，圆角依旧不变，是什么让它风韵犹存呢？我们来看一下这块的html+css代码：

<div style="height: 1px;overflow: hidden;display: block;background: #B2D0EA;margin: 0 3px;"></div>
<div style="height: 1px;overflow: hidden;display: block;border-right: 2px solid #B2D0EA;border-left: 2px solid #B2D0EA;margin: 0 1px;"></div>
<div style="background: #EDF7FF;border-left: 1px solid #B2D0EA;border-right: 1px solid #B2D0EA;">
<div style="background: #EDF7FF;padding: 5px;">秋叶网络博客</div>
<div style="background: #FFFFFF;padding: 5px;">netblog.cn</div>
</div>
<div style="height: 1px;overflow: hidden;display: block;border-right: 2px solid #B2D0EA;border-left: 2px solid #B2D0EA;margin: 0 1px;"></div>
<div style="height: 1px;overflow: hidden;display: block;border-right: 2px solid #B2D0EA;border-left: 2px solid #B2D0EA;margin: 0 2px;"></div>
<div style="height: 1px;overflow: hidden;display: block;border-right: 2px solid #B2D0EA;border-left: 2px solid #B2D0EA;margin: 0 3px;"></div>
<div style="height: 1px;overflow: hidden;display: block;background: #B2D0EA;margin: 0 4px;clear: both;"></div>

原理很简单，只要懂html+css的一看就明白，所谓的圆角它是利用不同div的边框（一点）连续成一条直线，然后再通过每个div使用margin属性使其一步一步错开，从而构造一个弧度，由于边框在任意浏览器上都是显示的，所以圆角效果达到了兼容任意浏览器。我们把这块代码拆分开来讲解一下：

<!--制作左上角和右上角-->
<div style="height: 1px;overflow: hidden;display: block;background: #B2D0EA;margin: 0 3px;"></div> <!--制作上边框，高度为1，背景颜色即成了边框颜色，左右缩进3px像素->
<div style="height: 1px;overflow: hidden;display: block;bordert-righ: 2px solid #B2D0EA;border-left: 2px solid #B2D0EA;margin: 0 1px;"></div> <!--高度为1，背景颜色无，左右边框为边界值颜色，从而构成左右分开的两个点。左右缩进1px，和上面的3px和下面主体的0px在3px的长度上构成一个弧度->
<!--制作左上角和右上角-->

<!--内容-->
<div style="background: #EDF7FF;border-left: 1px solid #B2D0EA;border-right: 1px solid #B2D0EA;">
 <div style="background: #EDF7FF;padding: 5px;">秋叶网络博客</div>
 <div style="background: #FFFFFF;padding: 5px;">netblog.cn</div>
</div>
<!--内容-->

<!--制作左下角和右下角-->
<div style="height: 1px;overflow: hidden;display: block;border-right: 2px solid #B2D0EA;border-left: 2px solid #B2D0EA;margin: 0 1px;"></div> 
<div style="height: 1px;overflow: hidden;display: block;border-right: 2px solid #B2D0EA;border-left: 2px solid #B2D0EA;margin: 0 2px;"></div> 
<div style="height: 1px;overflow: hidden;display: block;border-right: 2px solid #B2D0EA;border-left: 2px solid #B2D0EA;margin: 0 3px;"></div> 
<div style="height: 1px;overflow: hidden;display: block;background: #B2D0EA;margin: 0 4px;clear: both;"></div>
<!--制作左下角和右下角-->