HTML5學堂小編：圓形，一個很奇妙的形狀，在各種地方都可以看得到，特別是現在各類網站，都會有各種的圓形。圓角的製作曾經困擾了開發者很久，以至於以前開發者只能使用圖片來替代。但是當CSS3的這個border-radius出現之後，對於開發者而言簡直就是福利，只需要在需要圓的地方給上一句程式碼就可以了。一起來學習學習吧~~~

如何理解border-radius

border-radius——CSS3的圓角屬性。但是除了圓角的定義外，它還可以做點別的事情。radius其實指的是邊框所在圓的半徑，這個CSS3屬性不僅能夠建立圓角，還可以建立橢圓角（如圖下圖第2），而把這些角按照不同的順序和大小來展現，也能夠繪製成多種多樣的圖形。以下圖例就是通過定義border-radius得到的效果。

基本語法

想要完成上述的這些圖例，我們及很有必要來了解一下其語法到底是怎麼樣的。書寫形式如下：

border-radius ： none | {1,4} [/ {1,4} ]?；

none代表的是不設定圓角。後面的引數值代表水平或者垂直方向的圓角值設定，其中前部分引數{1,4}代表水平方向的值，後部分引數[/ {1,4} ]?代表垂直方向的值，可省略。

提醒：border-radius是CSS3的屬性，書寫的時候建議加上核心字首。

border-radius可以通過值來定義樣式相同的角，也對每個角分別定義。下面的圖解釋了各個寫法所表示的效果。

針對圓角的設定，每個角上的兩個值分別代表該角的水平方向和垂直方向的半徑，上圖有4個值與8個值的解釋，對比看下圖，理解起來可以更清楚一些。

詳細案例分析

把上述的基本圖形進行組合，還可以描繪成不同的圖案，如下面的幾個簡單舉例。僅border-radius就能實現這麼豐富的圖案，如果我們再加上邊框大小、顏色等，將會新增更多的質感。

1）Pac-Man

經典的“吃豆人”遊戲是一個缺了四分之一的圓形，把它畫出來，那必然是需要用到圓角屬性的，當然除了圓角，還需要藉助一個transparent（指定全透明色彩）屬性來配合。如下的程式碼案例：

.pac-man {
    width: 0px;
    height: 0px;
    border: 60px solid yellow;
    border-color: yellow transparent yellow yellow ;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    border-radius: 60px;
}
<div class="pac-man"></div>
 

效果如下：

程式碼解析：上述案例中，我們主要是寫了一個寬高都為0，但是邊框大小是60px的圓，然後藉助transparent屬性讓這個圓形的右邊變成透明，以此來呈現一個“吃豆人”的形象。

2）"愛心"製作

"愛心"這個標示會出現在各種不同的場合，聊天的表情、某網頁的圖示都有愛心這個形狀，藉助圓角能不能製作愛心，要怎麼做？

本例中，就使用圓角，藉助偽元素:before和:after以及CSS3中的旋轉為大家制作了一個"愛心"。具體程式碼如下：

.heart{
    position: relative;
    width: 160px;
    height: 200px;
} 
.heart:before{
    position: absolute;
    left: 20px;
    width: 80px;
    height: 120px;
    content: " ";
    background: #f00;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px 100px 0 0;
    -webkit-transform: rotate(-45deg);
} 
.heart:after{
    position: absolute;
    left: 48px;
    top: 0px;
    width: 80px;
    height: 120px;
    content: " ";
    background: #f00;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px 100px 0 0;
    -webkit-transform: rotate(45deg);
}
<div class="heart"></div>

效果如下：

程式碼解析：上述案例中，藉助偽元素來實現兩個左上角和右上角都出現圓角的塊狀，減少了div的使用。然後藉助CSS3的另外一個特性-旋轉，分別正向和逆向完成一個愛心的拼接，最後展現出來。

3）陰陽圖

本案例展示了一個陰陽圖的做法，通過使用標籤的偽元素、元素邊框以及定位的操作，用層疊的視覺效果給大家展示一個"八卦"的樣子。具體的程式碼如下：

.wrap .gossip {
    position: relative;
    width: 96px;
    height: 48px;
    border-color: #000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    background: #fff;
    border-radius: 100%;
}
.wrap .gossip:before {
    position:
    absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    border: 18px solid #000;
    background: #fff;
    content: "";
    border-radius: 100%;
}
.wrap .gossip:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border: 18px solid #fff;
    background: #000;
    content: "";
    border-radius:100%;
} 
<div class="gossip"></div>

效果如下：

程式碼解析：上述案例中，陰陽圖的上半部分是寬高度展示的，下半部分是元素的邊框展示的，然後藉助兩個偽元素記憶偽元素的邊框來實現黑色和白色的小圓，從而實現整個陰陽圖的製作。