border-radius屬性

border-radius屬性是用來給background添加圓角的。屬性的值表示border曲線圓角曲線對應的半徑。background的曲線的半徑＝border的曲線的半徑－border的width所以若是border的width>= border曲線的半徑的時候，background將不會有圓角的屬性。
例如如：

.test{
     border:solid 16px black;
     border-radius: 14px;
}
//這個樣式，將會致使background沒有圓角效果，background的曲線對應的半徑爲－2,將不會shape出這個曲線。border－radius 最好的使用方法是:border的寬度<border的曲線半徑.例如：
.test{
     border:solid 16px black;
     border-radius: 20px;
}
//這種樣式下，background會有一個曲線，曲線的半徑爲20-16=4。

---

其實，在css3中還有一種方法達到相同的模擬border的效果，那就是利用box-shadow屬性，該屬性表示的是box(只包括了background和border，是不包括margin)的陰影。
若是設置了陰影的width，而且陰影的垂直和水平方向都設置爲0，時能夠模擬出border的效果。這個時候陰影對應的曲線對應的半徑＝border的半徑＋陰影的width。

.test{
            position: absolute;
            margin: auto;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;
           border-top-right-radius: 100px;
           /*padding: 20px;*/
            /*border-top-right-radius: 100px;*/
           padding: 10px;
           border:50px solid black;
           box-shadow: 0 0 0 50px red;
           width:100px;
           height: 200px;
           background: greenyellow;
        }

紅色的地方爲陰影，黑色是border，綠色是background。