CSS圆角进化三个阶段
背景图片实现圆角
CSS2.0+HTML标签模拟圆角
CSS3.0圆角属性（border-radius属性实现圆角）
一、背景图片实现圆角
实现方式：
宽度固定，高度自适应
设置两个div，分别设置其背景图为宽度固定的圆角图，且div宽度与图片宽度一致。
//假设上圆角（top_800.gif)与下圆角背景图片(bottom_800.gif)为800px
<style type="text/css">
.top {
background:url("top_gif") 0 0 no-repeat;
width:800px;
}
.bottom {
background:url("bottom_gif") 0 0 no-repeat;
width:800px;
}
</style>
<body>
<div id="container">
<div id="top"></div>
<div id="bottom"></div>
<div id="bottom"></div>
</div>
</body>宽度和高度均自适应
二、CSS2.0和HTML标签实现圆角
利用div元素，一层一层叠加，每一层比上一层多一像素。
<style type="text/css">
#radius_1 {
margin:0 2px;
height:1px;
}
#radius_2 {
margin:0 1px;
height:1px;
}
</style>
<div id="container">
<div id="radius_1"></div> //制作圆角
<div id="radius_2"></div>
<div id="contetn">内容</div>
<div id="radius_2"></div> //制作圆角
<div id="radius_1"></div>
</div>三、CSS3.0圆角属性实现圆角
3.1 圆角属性（border-radius）属性简介
属性值：表示圆角半径，可使用长度单位px或百分比
简写属性：border-radius
分量属性：border-top-left-radius（上左）、border-top-right-radius（上右）、border-bottom-left-radius（下左）、border-bottom-right-radius（下右）（注意top和bottom在前，left和right在后）
3.2 简写属性的值设置
1个属性值：4个角半径相同
2个属性值：分别为上左和下右、上右和下左
3个属性值：分别代表上左、上右和下左、下右
4个属性值：分别代表上左、上右、下右、下左
3.3 浏览器私有前缀
解决各浏览器显示差异，针对浏览器写私有前缀：
IE内核：-ms-
FireFox内核：-moz-
谷歌浏览器、Safari内核：-webkit-
