border-radius，國內(nèi)翻譯成圓角，你可能以為這個(gè)屬性就是用來畫圓角，沒錯(cuò)，但是除此之外，它還可以做點(diǎn)別的事情。radius其實(shí)指的是邊框所在圓的半徑，這個(gè)CSS3屬性不僅能夠創(chuàng)建圓角，還可以創(chuàng)建橢圓角，把這些角按照不同的順序和大小來展現(xiàn)，能夠繪制成多種多樣的圖形。以下圖例就是通過定義border-radius得到的效果。
語法和解釋
border-radius可以通過值來定義樣式相同的角，也對(duì)每個(gè)角分別定義。下面的表格解釋了各個(gè)寫法所表示的效果。
語法
border-radius:10px
解釋
將創(chuàng)建四個(gè)大小一樣的圓角，如圖1和2。
語法
border-radius:10px 15px 10px 5px;
解釋
四個(gè)值分別表示左上角、右上角、右下角、右下角。
語法
border-radius:10px 15px;
解釋
第一個(gè)值表示左上角、右下角；第二個(gè)值表示右上角、左下角。
語法
border-radius:10px 15px 5px;
解釋
第一個(gè)值表示左上角；第二個(gè)值表示右上角、左下角；第三個(gè)值表示右下角。
語法
border-bottom-left-radius:20px 10px;
解釋
創(chuàng)建不對(duì)稱的角–橢圓角。
語法
border-radius:20px/10px;
解釋
寫橢圓角的時(shí)候，可以用短寫法，創(chuàng)建四個(gè)一樣的橢圓角。
語法
border-radius:10px 20px 30px 40px
解釋
四個(gè)值分別表示四個(gè)角的半徑（水平和垂直半徑一樣），如圖11。
語法
border-radius:10px 20px 30px 40px/20px 50px 30px 10px;
解釋
斜杠前面的一組四個(gè)值分別表示四個(gè)角的水平半徑；斜杠后面的一組四個(gè)值分別表示四個(gè)角的垂直半徑。
語法
border-radius:10px 20px 40px/20px 50px
解釋
斜杠前面和后面每一組分別表示的是四個(gè)角水平半徑和四個(gè)角垂直半徑。兩個(gè)值、三個(gè)值的順序規(guī)則你懂的哈。
對(duì)于每個(gè)角的兩個(gè)值，分別代表的是該角的水平方向和垂直方向的半徑。若有四個(gè)值，上面表格有解釋。看下面這個(gè)圖，或許會(huì)清晰些。邊框大小和外半徑、內(nèi)半徑的關(guān)系
實(shí)際的內(nèi)半徑相當(dāng)于外半徑減去相應(yīng)的邊框大小。相減的值中如果至少一個(gè)為為負(fù)值或零，則內(nèi)半徑為直角。不管怎樣，相鄰的兩個(gè)邊都會(huì)形成流暢的線條
