border-radius以外的CSS圆角边框制作方法

CSS3的border-radius
利用DIV+CSS生成圆角边框，在很多情况下都会用到，目前DIV+CSS的圆角边框，一种是利用CSS3，一种是利用布局模拟出圆角。
先说第一种，利用CSS3，前提是您的浏览器必须支持CSS3，Firefox3是支持的，我看到的很多网站圆角也是利用CSS3直接生成的，无非就是ie下依然显示直角而已，让ie固执去吧。

利用CSS3，你可以指定4个角都是圆角，或者某一个角是圆角非常方便，代码如下：

1. #round {     
2.     background-color: #000;     
3.     border: 1px solid #000;     
4.     -moz-border-radius: 10px;     
5.     -webkit-border-radius: 10px;     
6.     color:#fff;     
7. }     
8.      
9. #indie {     
10.     background-color: #000;     
11.     border: 1px solid #000;     
12.     -moz-border-radius-topright: 10px;     
13.     -moz-border-radius-bottomright: 10px;     
14.     -webkit-border-top-left-radius: 10px;     
15.     -webkit-border-bottom-left-radius: 10px;     
16.     color:#fff;     
17. }     

<div id="round"><h1>圆角边框</h1></div> 
<div id="indie"><h1>部分圆角</h1></div> 
 

不使用 border-radius 实现圆角
CSS3中，利用属性 border-radius 可以很方便的设置出圆角矩形，但是在IE8及以下版本却不支持这个属性，为了在旧版本的浏览器中实现宽高自适应的圆角矩形，可以采用以下三种方法。

1.使用背景图片制作圆角

使用背景图片制作宽、高自适应的圆角矩形，首先需要切出4个圆角图片，然后把4个圆角图片放在矩形的四个角上就大功告成了，这一共需要5个div标签，1个容器div和4个圆角背景div。是不是很好理解。

具体实现来说，需要注意一些细节。对于矩形容器div：

上下内边距的大小至少设置为圆角的高度。
position设置为相对定位。
放置内容。
对于4个圆角背景div：

分别设置各个圆角背景图片。
绝对定位于容器矩形的四个角。
需要设置宽高值才能显示背景图片。
假设圆角图片的宽高是5px，具体代码如下：

1. <div class="content">  
2.     <div class="top-left"></div>  
3.     <div class="top-right"></div>  
4.     <div class="btm-left"></div>  
5.  <div class="btm-right"></div>  
6. </div>  

1. .content {   
2.  position: relative;   
3.  padding: 5px;   
4. }   
5. .top-left,   
6. .top-rightright,