两种用CSS实现圆角边框的方法

圆角边框可以用图片实现，也可以用CSS实现。如果用图片做的话，就画好圆角然后设置成背景图片。用CSS不需要图片，直接用代码定义颜色。用图片的话，会影响网页打开速度，当然如果图片不大，影响也并不明显。用CSS不会影响网页打开速度，但是实现方法略麻烦，要写不少代码。不好讲哪个更好哪个更差，用到各自适合的地方就行了。

这里介绍两种不用图片，直接用CSS实现圆角边框的方法。两种CSS方法原理类似，都是在一个层上加二个或更多层，不过这些层只有左右边线，上边线和下边线有背景色，都有一定的长度差距差，从而呈现出圆角边框的效果。

方法一：

CSS样式定义，放在网页前部。绿色字是注释，红色字是可自行更改的颜色编码。

<style type=text/css>

<!--1.定义框内背景色为蓝色#0080FF-->
div.RoundedCorner{background: #0080FF}

<!--2.定义方框四角的颜色#FFFFFF，应该设置成与整体页面背景色相同，才能融入背景，使框呈现出圆角形状-->
b.rtop, b.rbottom{display:block;background: #FFFFFF}

<!--3.定义圆角框边框颜色，应该设置成与1.框内背景色相同的颜色，即蓝色-->
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #0080FF}

<!--4.定义圆角弧度，直接拷贝即可-->
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

</style>

引用以上定义的样式，在网页中显示圆角边框。绿色字是注释。

<!--1.定义层，引用样式，生成圆角边框，直接拷贝即可-->
<div class=RoundedCorner>
<b class=rtop><b class=r1></b><b class=r2></b><b class=r3></b><b class=r4></b></b>

<!--2.定义圆角框里面显示的内容，可根据需要自行修改-->
<br>CSS圆角边框，无图片实现方法<br><br>

<!--3.定义层，引用样式，生成圆角边框，直接拷贝即可-->
<b class=rbottom><b class=r4></b><b class=r3></b><b class=r2></b><b class=r1></b></b>
</div>

方法二：

首先选择一系列同色颜色，以便营造平滑的圆角效果
较深的蓝色#0a67e6
略浅的蓝色#3883ea
更浅的蓝色#478dec
较浅的蓝色#95bdf4

CSS样式定义，放在网页前部。红色字是可自行更改的颜色编码。

<style type=text/css>    
.R{ 
display:block;    
}    
.R *{    
display:block;    
height:1px;    
overflow:hidden;    
background:#0a67e6;    
}    
.R1{    
border-right:1px solid #95bdf4;    
padding-right:1px;    
margin-right:3px;    
border-left:1px solid #95bdf4;    
padding-left:1px;    
margin-left:3px;    
background:#478dec;    
}    
.R2{    
border-right:1px solid #e6effc;    
border-left:1px solid #e6effc;    
padding:0px 1px;    
background:#3883ea;    
margin:0px 1px;    
}    
.R3{    
border-right:1px solid #3883ea;    
border-left:1px solid #3883ea;    
margin:0px 1px;    
}    
.R4{    
border-right:1px solid #95bdf4;    
border-left:1px solid #95bdf4;    
}    
.R5{    
border-right:1px solid #478dec;    
border-left:1px solid #478dec;    
}    
.R_content{    
padding:0px 5px;    
background:#0a67e6;    
}    
</style>    

引用以上定义的样式，在网页中显示圆角边框。绿色字是注释。

<!--1.定义层，引用样式，生成圆角边框，直接拷贝即可-->
<div>    
<b class=R>
<b class=R1><b></b></b>  
<b class=R2><b></b></b>    
<b class=R3></b>    
<b class=R4></b>    
<b class=R5></b>    
</b>    
<div class=R_content>  
  
<!--2.定义圆角框里面显示的内容，可根据需要自行修改 -->   
<br>CSS圆角边框，无图片实现方法<br><br>

<!--3.定义层，引用样式，生成圆角边框，直接拷贝即可-->
</div>    
<b class=R>    
<b class=R5></b>    
<b class=R4></b>    
<b class=Ry3></b>    
<b class=R2><b></b></b>    
<b class=R1><b></b></b>    
</b>    
</div>
 

第一种方法不错 
      ------------------------------------
   ------------------------------------------
  --------------------------------------------
 ----------------------------------------------
就是这么个原理

在IE上面没有作用

在IE6上面有作用的..
反正知道原理了,自己写也行的