圆角边框(CSS3)

从此以后，我们的世界不只有矩形。
语法格式：
Border-radius: 水平半径/垂直半径；
一般我们垂直半径都是省略的默认和水平半径一样。
border-radius: 左上角 右上角 右下角 左下角;

<style>
div {
width:200px;
height:200px;
border:1px solid red;
margin:10px 40px;
text-align: center;
line-height: 200px; }
div:first-child {
border:10px solid red;
border-radius: 20px/50px; }
div:nth-child(2) {
border-radius: 20px; }
div:nth-child(3) {
border-radius: 15px 0; }
div:nth-child(4) {
border-radius:100px; }
div:nth-child(5) {
border-radius: 50%; }
div:nth-child(6) {
border-radius: 100px 0; }
div:nth-child(7) {
border-radius: 200px 0 0 0; }
div:nth-child(8) {
border-radius: 100px 100px 0 0;
height:100px; /*高度减半*/
}
div:nth-child(9) {
68
border-radius: 100px;
height:100px; }
div:nth-child(10) {
border-radius: 100%;
height:100px; }
</style