CSS3的border-radius屬性，最常見的也許是被用來畫圓形，方法是設置一個正方形div之后，給它的border-radius屬性設置50%的值。
今天對border-radius屬性做一個擴展，首先看一下最基本的border-radius樣式：
border-radius:水平值1 水平值2 水平值3 水平值4 / 垂直值1 垂直值2 垂直值3 垂直值4;
而且，為 border-radius 屬性分別指定4、3、2、1 個由空格分隔的值時，這些值是以這樣的規律分配到四個角上的（如下圖）：
當然也可以單獨設置每個角的圓角值，如果不嫌麻煩的話：
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
老版本IE不支持圓角屬性，可以參考這篇文章的解決辦法：http://www.catswhocode.com/blog/10-ways-to-make-internet-explorer-act-like-a-modern-browser---
實例：
1.一個半橢圓
HTML代碼：
<div class="example1"></div>
CSS代碼：
.example1 {
width:200px;
height: 150px;
border-radius: 50% / 100% 100% 0 0;
background: #8BC34A;
}
2.不同水平和垂直半徑的圖形
HTML代碼：
<div class="example2"></div>
CSS代碼：
.example2 {
width:200px;
height: 200px;
border-radius:100px/70px;
background: red;
}
3.border 畫的圓形
HTML代碼：
<div class="example3"></div>
CSS代碼：
.example {
width:0;
height:0;
border:100px solid gray;
border-radius:100px;
border-right-color:transparent;
}
好的，關于border-radius屬性，先了解這么多吧。
