当前位置: 秋叶网络博客 网络技术 ◊ 制作兼容IE的圆角DIV容器及原理

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

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

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

秋叶网络博客
www.wuover.com


这个可不是图片来的哦,这是纯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;">www.wuover.com</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;">www.wuover.com</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>
<!--制作左下角和右下角-->

如果要使圆角弧度变大,就按照制作左下角和右下角的那块代码来自行添加div线条。通过margin一个px一个px来构造。

因为是由点构成的弧度,所以会有锯齿感,容差为1px,放大可以看得很明显。这就是它的不足之处,还有一点就是,如果弧度大的话,需要比较多的html代码,这也就增加了页面的体积。

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/320.html
目录: 网络技术 | 标签: 兼容圆角制作 | 6602次阅读