圆角框的实现

spllot · 发表于 2013-2-7 19:50:45

研究了一下用CSS实现一个圆角框的原理，自己随意写了一个简单的实现。代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css">.xb1,.xb2,.xb3,.xb4,.xb5,.xb6,.xb7{display:block;font-size:0; height:1px;background:#7f7f9c}.xb1{margin:0 8px;}.xb2{margin:0 6px;}.xb3{margin:0 4px;}.xb4{margin:0 3px;}.xb5{margin:0 2px;}.xb6{margin:0 2px;}.xb7{margin:0 1px;}#content{background:#7f7f9c;border:3px solid #7f7f9c;}#xbox{width:500px;height:200px;background:red;margin:15px; padding:30px;} </style> </head> <body><div id="xbox"><div id = "content">用css实现的圆角框用css实现的圆角框用css实现的圆角框</div><div> </body></html>
效果图如下：

其实它的实现原理比较简单，是通过元素堆起来的，一个圆角框其实是由三个大的部分组成的，如下图所示：我们可以看到中间红色的矩形区域，这是其中的一部分，另外两部分是被红色区域所分隔开的上、下两个部分。

这3个部分分别对应着html代码中的如下三个片断：
 

 <div id = "content">用css实现的圆角框用css实现的圆角框用css实现的圆角框</div>

 
接下来就是采用CSS来实现圆角的效果。在实现之前我们先来揭开圆角的面纱。下图是我修改了CSS后的夸张效果：

很明显，上下两个部分都是通过一根一根长短不一的“棒子”堆成的。由于我设置了它们的高度为3px，即“棒子的厚度”，事实上在代码中我们设置它们的高度是1px,所以肉眼看上去感觉就是一个圆角，如果仔细观察，我们会发现这个圆角是有锯齿的。
从代码中可以看出，我们通过7个标签来实现了这个效果，我们假设这是7根水平堆积的“棒子”，我们通过height属性来设置它的厚度，通过margin属性来设置它们的长度和与相邻“棒子”之间的距离。由于当margin的值有2个的时候，前一个表示上下的距离，后一个表示左右的距离，所以效果是：7根“棒子“在上下方向上是紧挨的（因为其值为0），在左右方向上，由于设置的值不同（递增或递减），呈现的是阶梯状的。当这些效果弱化的时候，就呈现出圆角状了。

对于中间的矩形区域，则只须设置其左右边框，使之与上下两个圆角连接起来就可以了。这个区域也正是圆角边框的内容区域。

最后，需要注意设置的是背景色，通过将这些元素设置相同的背景色，就可以让人感觉到这是一个完整的圆角边框，而不是通过拼接而成的。

最后附加一个用V标签实现的圆角框，不过它只兼容IE。
<html xmlns:v> <head> <style> v\:* {behavior: url(#default#VML);} </style> </head> <body> <v:RoundRect style="position:relative;width:200;height:100px"> V标签实现的圆角框 </v:RoundRect> </body> </html>

		自动登录	找回密码
密码			立即注册