我們在很多網站包括 學習網都經常能看到圓角的效果。從用戶體驗和心理來說，圓角效果往往更為美觀大方。
在CSS2.1中，給元素實現圓角效果是很頭疼的一件事。老辦法都是使用背景圖片來實現，制作起來相對的麻煩。但是CSS3中border-radius屬性的出現，完美地解決了圓角效果難以實現的問題。
此外，在前端開發中，對於網頁設計，我們都是秉著“盡量少用圖片”的原則，能用CSS實現的效果，就盡量不要使用圖片。因為圖片需要引發http請求，並且傳輸量大，影響網頁加載性能。就像 學習網教程文章下方的這些小圖標都是使用“自定義小圖標字體”來實現，而不是使用圖片來實現。在CSS進階教程，我們有機會再給大家詳細探討一下“自定義小圖標字體”的技巧。
在CSS3中，我們可以使用border-radius屬性為元素添加圓角效果。
語法：
border-radius:長度值;
說明：
長度值可以是px、百分比、em等。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius屬性</title>
<style type="text/css">
#div1
{
width:100px;
height:50px;
border:1px solid gray;
border-radius:10px;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“border-radius:10px;”指的是元素四個角的圓角半徑都是10px。
跟border、padding、margin等屬性類似，對於圓角border-radius也有4種寫法。
當border-radius設置1個值時，例如“border-radius:10px;”表示4個角的圓角半徑都是10px。
當border-radius設置2個值時，例如“border-radius:10px 20px;”表示左上角和右下角的圓角半徑是10px，右上角和左下角的圓角半徑都是20px。
當border-radius設置3個值時，例如“border-radius:10px 20px 30px;”表示左上角圓角半徑是10px，左下角和右上角圓角半徑都是20px，右下角圓角半徑是30px。
當border-radius設置4個值時，例如“border-radius:10px 20px 30px 40px;”表示左上角、右上角、右下角和左下角的圓角半徑依次是10px、20px、30px、40px。
這裡的“左上角、右上角、右下角和左下角”，大家按照順時針方向記憶就記住了。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius屬性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid red;
border-radius:10px 20px 30px 40px;
background-color:#FCE9B8;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
大家可以在上面的在線測試中改變屬性值來方便查看當border-radius屬性設置不同值的效果。
此外，雖然本人在Web開發時間不是很久，但是根據自己經驗而言，border-radius屬性一般都是使用一個值的居多，有誰設計圓角的時候，四個圓角都搞得不一樣（用得著那麼花哨麼= =！？）。
實心半圓分為：實心上半圓、實心下半圓、實心左半圓、實心右半圓。我們只要掌握制作一個方向的實心半圓的方法，其他方向的實心半圓就可以輕松實現，因為原理都一樣。
假如我們要制作實現上半圓，實現方法：把高度(height)設為寬度（width）的一半，並且只設置左上角和右上角的圓角半徑與元素的高度一致，而右下角和左下角的圓角半徑設置為0。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius屬性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid red;
border-radius:100px 100px 0 0;
background-color:#FCE9B8;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
border-radius屬性值是圓角的半徑，大家結合圓和矩形的數學知識，稍微想一想就知道實現半圓實現原理究竟是怎樣了。
此外，請大家根據上面的例子自行研究如何實現其他方向的實心半圓，把你的制作效果或代碼在下方評論分享給大家吧。
在CSS3中，使用border-radius屬性實現實心圓方法：把寬度（width）與高度(height)值設置為一致（也就是正方形），並且四個圓角值都設置為它們值的一半。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius屬性</title>
<style type="text/css">
#div1
{
width:100px;
height:100px;
border:1px solid red;
border-radius:50px;
background-color:#FCE9B8;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
站長推薦：下面是 論壇的一個版主Balrogs小濤使用border-radius屬性制作的哆啦A夢，這小子使用一個圓角屬性就“走遍”了天下。有興趣的同學可以去下載源碼看看。
源碼地址：純CSS3實現哆啦A夢
border-radius屬性可以分開，分別為四個角設置相應的圓角值，分別是：
（1）border-top-right-radius：右上角；
（2）border-bottom-right-radius：右下角；
（3）border-bottom-left-radius：左下角；
（4）border-top-left-radius：左上角；