CSS3的border-radius屬性，最常見(jiàn)的也許是被用來(lái)畫圓形感论，方法是設(shè)置一個(gè)正方形div之后绅项，給它的border-radius屬性設(shè)置50%的值。
今天對(duì)border-radius屬性做一個(gè)擴(kuò)展比肄，首先看一下最基本的border-radius樣式：
border-radius:水平值1 水平值2 水平值3 水平值4 / 垂直值1 垂直值2 垂直值3 垂直值4;
而且，為 border-radius 屬性分別指定4芳绩、3掀亥、2、1 個(gè)由空格分隔的值時(shí)妥色，這些值是以這樣的規(guī)律分配到四個(gè)角上的（如下圖）：
當(dāng)然也可以單獨(dú)設(shè)置每個(gè)角的圓角值撮竿，如果不嫌麻煩的話：
- 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---
實(shí)例：
1.一個(gè)半橢圓
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;
}
好的笔呀，關(guān)于border-radius屬性幢踏，先了解這么多吧。
