纯css无图片的边框圆角实现原理
时间:2011-06-08 来源:Matin
可以看到,不论采用图片实现圆角,还是各种“曲线救国”的圆角实现,在css3里面,都可以用一个border-radius全盘搞定,然而,因为border-radius属性仅仅少数几个新锐浏览器支持(比如FF4,IE9,CHROME等),当前使用的较多的可能还是用图片模拟,现在介绍一种不使用图片来实现圆角的方法,当然,这种方法对于像素的精确度要求较高,具体思路如下:
首先,圆角的生成类似一个金字塔,我们采用像素来调整,以便达到弧形的效果:
先构建HTML代码:
<div style="width:200px"> <span class="a1"></span><span class="a2"></span><span class="a3"></span><span class="a4"></span> <div class="div_main"> 内容区内容区内容区内容区内容区内容区内容区内容区 </div> <span class="b4"></span><span class="b3"></span><span class="b2"></span><span class="b1"></span> </div>
然后是css代码:
.a1,.a2,.a3,.a4,.b1,.b2,.b3,.b4,.div_main{display:block;overflow:hidden;} .a1,.a2,.a3,.b1,.b2,.b3{} .a2,.a3,.a4,.b2,.b3,.b4,.div_main{border-left:1px solid #999;border-right:1px solid #999;} .a1,.b1{margin:0 5px;background:#999;} /*border-width是为了微调像素,以便才看起来更协调*/ .a2,.b2{margin:0 3px;border-width:2px;} .a3,.b3{margin:0 2px;} .a4,.b4{margin:0 1px;}
实现的原理:
a1,a2,a3,a4是上半部分的结构样式;
b1,b2,b3,b4是下半部分的结构样式;
使用display:block使得每一个内部的span都变成块状元素,以便其宽度能100%伸张;
其中,a2,a3,a4,b2,b3,b4是圆角实现的主要class,采用margin递增的方式产生圆角,为了看起来更协调,对a2,b2进行了特别的处理,使其border-width变成2px;同时,a1的magrin变成5px;
需要注意的是,在使用下半部分时,顺序是反向的;b4—>b3-…
<span class="b4"></span><span class="b3"></span><span class="b2"></span><span class="b1"></span>
当然,你可能需要在div_main里面使用背景,那么记得对边线a2,a3,a4,b2,b3,b4也是用这个背景;
这种无图片的方法在对于自适应方面有一定的优势,不用采用图片的inner/outer容器设置背景图来实现自适应,但是,这种方法也有局限性,当要求的边框圆角角度需求较大或者说边线需求较宽的情况下,实现效果就不太协调,只能采用图片了,不过,值得欣慰的是,css3已经可以在一个元素上使用多张背景图;
效果图:
兼容性:
FF2.0+/IE5.0+/chrome/safari/