纯css无图片的边框圆角实现原理

可以看到，不论采用图片实现圆角，还是各种“曲线救国”的圆角实现，在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{height:1px;}
.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;height:2px;}

实现的原理：

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/

转载于:https://www.cnblogs.com/zorroLiu/archive/2011/06/08/2075199.html