CSS3【border-radius】制作半圓

1.利用css如何制作一個半圓？（思路：對樣式border-radius以及寬高的控制）

div{
    display: inline-block;
    border:1px solid #6baabb;
    width:40px;
    height:40px;
    float:left;
    margin:0px 10px;
}
a{
    display: inline-block;
    width:40px;
    height:40px;
    background: #6baabb;
}
.Round{/*圓*/
    border-radius:20px;
}
.LeftRound{/*左半圓*/
    width:20px;
    border-radius:20px 0px 0px 20px;
}
.RightRound{/*右半圓*/
    width:20px;
    border-radius:0px 20px 20px 0px;
}
.TopRound{/*上半圓*/
    height:20px;
    border-radius:20px 20px 0px 0px;
}
.BottomRound{/*下半圓*/
    height:20px;
    border-radius:0px 0px 20px 20px;
}

頁面部分

<div><a class="Round"></a></div>
<div><a class="LeftRound"></a></div>
<div><a class="RightRound"></a></div>
<div><a class="TopRound"></a></div>
<div><a class="BottomRound"></a></div>

效果：

 

2.即當a標簽內有內容時，無法再對a標簽進行寬高的控制，但又不想引入圖片作為背景，此時用css3漸變屬性linear-gradient
（思路：一個圓，將自己不需要顯示的半圓用白色背景）  

background:linear-gradient(to top, #fff 0%, #fff 45% ,#6baabb 50%,#6baabb); /*上半圓*/
background:linear-gradient(to bottom, #fff 0%, #fff 45% ,#6baabb 50%,#6baabb); /*下半圓*/

效果展示：