文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>纯css无图片的边框圆角实现原理

纯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/

相关阅读 更多 +
排行榜 更多 +
找茬脑洞的世界安卓版

找茬脑洞的世界安卓版

休闲益智 下载
滑板英雄跑酷2手游

滑板英雄跑酷2手游

休闲益智 下载
披萨对对看下载

披萨对对看下载

休闲益智 下载